commit 7344144e20c7c35e21b87aca4a0338ae55491830
Author: Ismail Hamzah <go2ismail@gmail.com>
Date:   Tue Jul 21 10:00:08 2026 +0700

    initial commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..61e0f82
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# OS files
+Thumbs.db
+.DS_Store
+*.swp
+*.swo
+
+# IDE
+.vscode/
+.idea/
+*.sublime-project
+*.sublime-workspace
+
+# .NET
+bin/
+obj/
+*.user
+*.suo
+*.cache
+*.log
+*.vs/
+packages/
+*.nupkg
+
+# Docker
+.dockerignore
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..341a9d2
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,36 @@
+# =====================================================================
+# Dockerfile untuk ASP.NET Core Razor Pages .NET 10
+# =====================================================================
+# Multi-stage build:
+#   Stage 1: Build aplikasi
+#   Stage 2: Run production
+# =====================================================================
+
+# ---- STAGE 1: BUILD ----
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
+WORKDIR /src
+
+# Copy csproj dan restore dependencies (cache layer)
+COPY *.csproj .
+RUN dotnet restore
+
+# Copy semua source code dan build
+COPY . .
+RUN dotnet publish -c Release -o /app --no-restore
+
+# ---- STAGE 2: RUN ----
+FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime
+WORKDIR /app
+
+# Copy hasil build dari stage 1
+COPY --from=build /app .
+
+# Set environment ke Production
+ENV ASPNETCORE_ENVIRONMENT=Production
+ENV ASPNETCORE_URLS=http://+:8080
+
+# Expose port
+EXPOSE 8080
+
+# Jalankan aplikasi
+ENTRYPOINT ["dotnet", "Indotalent.dll"]
\ No newline at end of file
diff --git a/Indotalent.csproj b/Indotalent.csproj
new file mode 100644
index 0000000..a3a34b6
--- /dev/null
+++ b/Indotalent.csproj
@@ -0,0 +1,9 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+</Project>
diff --git a/Indotalent.slnx b/Indotalent.slnx
new file mode 100644
index 0000000..1b6748f
--- /dev/null
+++ b/Indotalent.slnx
@@ -0,0 +1,3 @@
+<Solution>
+  <Project Path="Indotalent.csproj" />
+</Solution>
diff --git a/Pages/Components/alerts1.cshtml b/Pages/Components/alerts1.cshtml
new file mode 100644
index 0000000..1417976
--- /dev/null
+++ b/Pages/Components/alerts1.cshtml
@@ -0,0 +1,70 @@
+@page "/alerts1"
+@{
+    ViewData["Title"] = "Alerts 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V1 (Gray Dark Theme)</p>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><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 class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><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 class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><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 class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><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 class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 border-l-4 border-l-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 border-l-4 border-l-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 border-l-4 border-l-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 border-l-4 border-l-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 border-l-4 border-l-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                <div>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 border-t-4 border-t-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 border-t-4 border-t-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 border-t-4 border-t-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 border-t-4 border-t-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 border-t-4 border-t-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+            </div>
+        </div>
diff --git a/Pages/Components/alerts2.cshtml b/Pages/Components/alerts2.cshtml
new file mode 100644
index 0000000..ac87e5c
--- /dev/null
+++ b/Pages/Components/alerts2.cshtml
@@ -0,0 +1,240 @@
+@page "/alerts2"
+@{
+    ViewData["Title"] = "Alerts 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                        <div>
+                            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
+                            <p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V2 (Clean White/Blue)</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Success</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Info</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Warning</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Danger</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Neutral</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                    </div>
+                </div>
diff --git a/Pages/Components/alerts3.cshtml b/Pages/Components/alerts3.cshtml
new file mode 100644
index 0000000..c4215d3
--- /dev/null
+++ b/Pages/Components/alerts3.cshtml
@@ -0,0 +1,240 @@
+@page "/alerts3"
+@{
+    ViewData["Title"] = "Alerts 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                        <div>
+                            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
+                            <p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V3 (Blue Dominant/Soft Blue)</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-blue-50 border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-blue-50 border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-blue-50 border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-blue-50 border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                    </div>
+                </div>
diff --git a/Pages/Components/alerts4.cshtml b/Pages/Components/alerts4.cshtml
new file mode 100644
index 0000000..4cd4da9
--- /dev/null
+++ b/Pages/Components/alerts4.cshtml
@@ -0,0 +1,70 @@
+@page "/alerts4"
+@{
+    ViewData["Title"] = "Alerts 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V4 (Blue Dominant/Soft Pill)</p>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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 class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-blue-50 border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                <div>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-blue-50 border border-green-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-blue-50 border border-green-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+                    <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
+                    <div class="space-y-3">
+                        <div class="alert-item relative bg-blue-50 border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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 class="alert-item relative bg-blue-50 border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><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>
+            </div>
+        </div>
diff --git a/Pages/Components/alerts5.cshtml b/Pages/Components/alerts5.cshtml
new file mode 100644
index 0000000..2199b5d
--- /dev/null
+++ b/Pages/Components/alerts5.cshtml
@@ -0,0 +1,240 @@
+@page "/alerts5"
+@{
+    ViewData["Title"] = "Alerts 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                        <div>
+                            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
+                            <p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V5 (Flat Sharp/White Blue)</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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 class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10">
+                                    <div>
+                                        <h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Success</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Info</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Warning</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Danger</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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 class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Neutral</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                        <div>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 rounded-none p-4 pr-10 flex gap-3">
+                                    <svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                            <h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
+                            <div class="space-y-3">
+                                <div class="alert-item relative bg-white border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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 class="alert-item relative bg-white border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3">
+                                    <span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
+                                    <div>
+                                        <h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
+                                        <p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
+                                    </div>
+                                    <button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><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>
+                    </div>
+                </div>
diff --git a/Pages/Components/buttons1.cshtml b/Pages/Components/buttons1.cshtml
new file mode 100644
index 0000000..1689468
--- /dev/null
+++ b/Pages/Components/buttons1.cshtml
@@ -0,0 +1,183 @@
+@page "/buttons1"
+@{
+    ViewData["Title"] = "Buttons 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V1 (Rounded + Blue Accent)</p>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Close
+                        </button>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
+                        <div class="h-4 bg-gray-100 rounded w-24"></div>
+                        <div class="h-4 bg-gray-100 rounded w-32"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Cancel
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M5 13l4 4L19 7"/></svg> Confirm
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="font-bold text-gray-900">Card Title</h3>
+                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-full"></div>
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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> Cancel
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M5 13l4 4L19 7"/></svg> Confirm
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                            <span class="btn-text">Primary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            <span class="btn-text">Secondary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="btn-text">Success</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                            <span class="btn-text">Danger</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                            <span class="btn-text">Warning</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/buttons2.cshtml b/Pages/Components/buttons2.cshtml
new file mode 100644
index 0000000..346beb1
--- /dev/null
+++ b/Pages/Components/buttons2.cshtml
@@ -0,0 +1,183 @@
+@page "/buttons2"
+@{
+    ViewData["Title"] = "Buttons 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V2 (Outlined + Pill Shape)</p>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
+                        <button class="px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
+                        <button class="px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
+                        <button class="px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
+                        <button class="px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Close
+                        </button>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
+                        <div class="h-4 bg-gray-100 rounded-full w-24"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-32"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Cancel
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M5 13l4 4L19 7"/></svg> Confirm
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="font-bold text-gray-900">Card Title</h3>
+                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded-full w-full"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
+                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
+                            <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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> Cancel
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M5 13l4 4L19 7"/></svg> Confirm
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                            <span class="btn-text">Primary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            <span class="btn-text">Secondary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="btn-text">Success</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                            <span class="btn-text">Danger</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                            <span class="btn-text">Warning</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/buttons3.cshtml b/Pages/Components/buttons3.cshtml
new file mode 100644
index 0000000..7b1d471
--- /dev/null
+++ b/Pages/Components/buttons3.cshtml
@@ -0,0 +1,183 @@
+@page "/buttons3"
+@{
+    ViewData["Title"] = "Buttons 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V3 (Ghost / Soft Background)</p>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">Primary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">Secondary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">Success</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">Danger</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">Warning</button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
+                            <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
+                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
+                            <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> Close
+                        </button>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
+                        <div class="h-4 bg-gray-100 rounded w-24"></div>
+                        <div class="h-4 bg-gray-100 rounded w-32"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
+                            <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> Cancel
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
+                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
+                            <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="M5 13l4 4L19 7"/></svg> Confirm
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="font-bold text-gray-900">Card Title</h3>
+                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-full"></div>
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
+                                <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> Cancel
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
+                                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
+                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
+                                <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="M5 13l4 4L19 7"/></svg> Confirm
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
+                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                            <span class="btn-text">Primary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            <span class="btn-text">Secondary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="btn-text">Success</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                            <span class="btn-text">Danger</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                            <span class="btn-text">Warning</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/buttons4.cshtml b/Pages/Components/buttons4.cshtml
new file mode 100644
index 0000000..25baf9d
--- /dev/null
+++ b/Pages/Components/buttons4.cshtml
@@ -0,0 +1,183 @@
+@page "/buttons4"
+@{
+    ViewData["Title"] = "Buttons 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V4 (Gradient Background)</p>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Close
+                        </button>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
+                        <div class="h-4 bg-gray-100 rounded w-24"></div>
+                        <div class="h-4 bg-gray-100 rounded w-32"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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> Cancel
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M5 13l4 4L19 7"/></svg> Confirm
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="font-bold text-gray-900">Card Title</h3>
+                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-full"></div>
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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> Cancel
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M5 13l4 4L19 7"/></svg> Confirm
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
+                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                            <span class="btn-text">Primary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            <span class="btn-text">Secondary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="btn-text">Success</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                            <span class="btn-text">Danger</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                            <span class="btn-text">Warning</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/buttons5.cshtml b/Pages/Components/buttons5.cshtml
new file mode 100644
index 0000000..e024df0
--- /dev/null
+++ b/Pages/Components/buttons5.cshtml
@@ -0,0 +1,183 @@
+@page "/buttons5"
+@{
+    ViewData["Title"] = "Buttons 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V5 (Flat Sharp / Square Edges)</p>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">Primary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">Secondary</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">Success</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">Danger</button>
+                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">Warning</button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
+                            <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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
+                            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
+                            <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> Close
+                        </button>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
+                        <div class="h-4 bg-gray-100 rounded w-24"></div>
+                        <div class="h-4 bg-gray-100 rounded w-32"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
+                    </div>
+                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
+                            <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> Cancel
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
+                            <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
+                            <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="M5 13l4 4L19 7"/></svg> Confirm
+                        </button>
+                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
+                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                    <div class="p-5 border-b border-gray-100">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="font-bold text-gray-900">Card Title</h3>
+                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 space-y-4">
+                        <div class="h-4 bg-gray-100 rounded w-full"></div>
+                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
+                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
+                                <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> Cancel
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
+                                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
+                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
+                                <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="M5 13l4 4L19 7"/></svg> Confirm
+                            </button>
+                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
+                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
+                <div class="bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                            <span class="btn-text">Primary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            <span class="btn-text">Secondary</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="btn-text">Success</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                            <span class="btn-text">Danger</span>
+                        </button>
+                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
+                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                            <span class="btn-text">Warning</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/cards1.cshtml b/Pages/Components/cards1.cshtml
new file mode 100644
index 0000000..9379cfa
--- /dev/null
+++ b/Pages/Components/cards1.cshtml
@@ -0,0 +1,547 @@
+@page "/cards1"
+@{
+    ViewData["Title"] = "Cards 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Css:cards-page.css"] = "css/cards-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
+            </div>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="space-y-2">
+                                <div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="w-16 h-3 rounded bg-blue-100"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
+                                <div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
+                        <div class="flex flex-col items-center justify-center h-full min-h-[180px]">
+                            <svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            <span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
+                            <div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
+                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-red-500 text-sm font-semibold"><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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
+                                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
+                            <div class="relative" x-data="{ open: false }">
+                                <button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" 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>
+                                <div class="ck-dropdown" x-bind:class="{ 'open': open }">
+                                    <a href="#" x-on:click.prevent="open = false">Today</a>
+                                    <a href="#" x-on:click.prevent="open = false">7 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">30 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">This Quarter</a>
+                                    <a href="#" x-on:click.prevent="open = false">Custom Range</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ck-chart-placeholder">
+                            <div class="ck-bar-set">
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#10b981;height:95px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
+                                <div class="ck-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
+                            <button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Prospecting</p>
+                                <p class="text-lg font-bold text-gray-900">1,225</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Qualified</p>
+                                <p class="text-lg font-bold text-gray-900">640</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Negotiation</p>
+                                <p class="text-lg font-bold text-gray-900">156</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Closed Won</p>
+                                <p class="text-lg font-bold text-gray-900">89</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
+                            </div>
+                        </div>
+                        <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">John Doe</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Alex Kowalski</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Emma Parker</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-blue text-[10px]">Development</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                                <div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#10b981;">AK</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>4</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-amber text-[10px]">Design</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#ec4899;">EP</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>2</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-green text-[10px]">Testing</span>
+                            <span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#f97316;">AK</div>
+                                <div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
+                                <div class="ck-avatar-item" style="background:#6366f1;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>5</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-purple text-[10px]">Research</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
+                                <div class="ck-avatar-item" style="background:#ec4899;">AK</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>3</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="p-5 border-b border-gray-100">
+                            <h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
+                            <p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
+                                    <input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
+                                    <input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
+                                <input type="email" value="john.doe@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
+                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                <div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
+                            </div>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
+                                <input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
+                                <textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
+                            <span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(287)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$89.00</span>
+                                <span class="text-sm text-gray-400 line-through">$129.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(156)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$249.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(92)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$59.00</span>
+                                <span class="text-sm text-gray-400 line-through">$79.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(423)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$149.00</span>
+                                <span class="text-sm text-gray-400 line-through">$179.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
diff --git a/Pages/Components/cards2.cshtml b/Pages/Components/cards2.cshtml
new file mode 100644
index 0000000..6d0cce2
--- /dev/null
+++ b/Pages/Components/cards2.cshtml
@@ -0,0 +1,547 @@
+@page "/cards2"
+@{
+    ViewData["Title"] = "Cards 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Css:cards-page.css"] = "css/cards-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
+            </div>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="space-y-2">
+                                <div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="w-16 h-3 rounded bg-blue-100"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
+                                <div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
+                        <div class="flex flex-col items-center justify-center h-full min-h-[180px]">
+                            <svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            <span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
+                            <div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
+                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-red-500 text-sm font-semibold"><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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
+                                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
+                            <div class="relative" x-data="{ open: false }">
+                                <button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" 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>
+                                <div class="ck-dropdown" x-bind:class="{ 'open': open }">
+                                    <a href="#" x-on:click.prevent="open = false">Today</a>
+                                    <a href="#" x-on:click.prevent="open = false">7 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">30 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">This Quarter</a>
+                                    <a href="#" x-on:click.prevent="open = false">Custom Range</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ck-chart-placeholder">
+                            <div class="ck-bar-set">
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#10b981;height:95px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
+                                <div class="ck-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
+                            <button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Prospecting</p>
+                                <p class="text-lg font-bold text-gray-900">1,225</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Qualified</p>
+                                <p class="text-lg font-bold text-gray-900">640</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Negotiation</p>
+                                <p class="text-lg font-bold text-gray-900">156</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Closed Won</p>
+                                <p class="text-lg font-bold text-gray-900">89</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
+                            </div>
+                        </div>
+                        <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">John Doe</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Alex Kowalski</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Emma Parker</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-blue text-[10px]">Development</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                                <div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#10b981;">AK</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>4</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-amber text-[10px]">Design</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#ec4899;">EP</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>2</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-green text-[10px]">Testing</span>
+                            <span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#f97316;">AK</div>
+                                <div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
+                                <div class="ck-avatar-item" style="background:#6366f1;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>5</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-purple text-[10px]">Research</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
+                                <div class="ck-avatar-item" style="background:#ec4899;">AK</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>3</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="p-5 border-b border-gray-100">
+                            <h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
+                            <p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
+                                    <input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
+                                    <input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
+                                <input type="email" value="john.doe@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
+                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                <div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
+                            </div>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
+                                <input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
+                                <textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
+                            <span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(287)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$89.00</span>
+                                <span class="text-sm text-gray-400 line-through">$129.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(156)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$249.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(92)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$59.00</span>
+                                <span class="text-sm text-gray-400 line-through">$79.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(423)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$149.00</span>
+                                <span class="text-sm text-gray-400 line-through">$179.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
diff --git a/Pages/Components/cards3.cshtml b/Pages/Components/cards3.cshtml
new file mode 100644
index 0000000..0569364
--- /dev/null
+++ b/Pages/Components/cards3.cshtml
@@ -0,0 +1,547 @@
+@page "/cards3"
+@{
+    ViewData["Title"] = "Cards 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Css:cards-page.css"] = "css/cards-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
+            </div>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="space-y-2">
+                                <div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="w-16 h-3 rounded bg-blue-100"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
+                                <div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
+                        <div class="flex flex-col items-center justify-center h-full min-h-[180px]">
+                            <svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            <span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
+                            <div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
+                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-red-500 text-sm font-semibold"><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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
+                                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
+                            <div class="relative" x-data="{ open: false }">
+                                <button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" 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>
+                                <div class="ck-dropdown" x-bind:class="{ 'open': open }">
+                                    <a href="#" x-on:click.prevent="open = false">Today</a>
+                                    <a href="#" x-on:click.prevent="open = false">7 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">30 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">This Quarter</a>
+                                    <a href="#" x-on:click.prevent="open = false">Custom Range</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ck-chart-placeholder">
+                            <div class="ck-bar-set">
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#10b981;height:95px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
+                                <div class="ck-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
+                            <button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Prospecting</p>
+                                <p class="text-lg font-bold text-gray-900">1,225</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Qualified</p>
+                                <p class="text-lg font-bold text-gray-900">640</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Negotiation</p>
+                                <p class="text-lg font-bold text-gray-900">156</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Closed Won</p>
+                                <p class="text-lg font-bold text-gray-900">89</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
+                            </div>
+                        </div>
+                        <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">John Doe</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Alex Kowalski</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Emma Parker</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-blue text-[10px]">Development</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                                <div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#10b981;">AK</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>4</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-amber text-[10px]">Design</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#ec4899;">EP</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>2</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-green text-[10px]">Testing</span>
+                            <span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#f97316;">AK</div>
+                                <div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
+                                <div class="ck-avatar-item" style="background:#6366f1;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>5</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-purple text-[10px]">Research</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
+                                <div class="ck-avatar-item" style="background:#ec4899;">AK</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>3</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="p-5 border-b border-gray-100">
+                            <h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
+                            <p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
+                                    <input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
+                                    <input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
+                                <input type="email" value="john.doe@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
+                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                <div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
+                            </div>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
+                                <input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
+                                <textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
+                            <span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(287)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$89.00</span>
+                                <span class="text-sm text-gray-400 line-through">$129.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(156)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$249.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(92)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$59.00</span>
+                                <span class="text-sm text-gray-400 line-through">$79.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(423)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$149.00</span>
+                                <span class="text-sm text-gray-400 line-through">$179.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
diff --git a/Pages/Components/cards4.cshtml b/Pages/Components/cards4.cshtml
new file mode 100644
index 0000000..270a546
--- /dev/null
+++ b/Pages/Components/cards4.cshtml
@@ -0,0 +1,547 @@
+@page "/cards4"
+@{
+    ViewData["Title"] = "Cards 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Css:cards-page.css"] = "css/cards-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
+            </div>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="space-y-2">
+                                <div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="w-16 h-3 rounded bg-blue-100"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
+                                <div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
+                        <div class="flex flex-col items-center justify-center h-full min-h-[180px]">
+                            <svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            <span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
+                            <div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
+                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-red-500 text-sm font-semibold"><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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
+                                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
+                            <div class="relative" x-data="{ open: false }">
+                                <button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" 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>
+                                <div class="ck-dropdown" x-bind:class="{ 'open': open }">
+                                    <a href="#" x-on:click.prevent="open = false">Today</a>
+                                    <a href="#" x-on:click.prevent="open = false">7 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">30 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">This Quarter</a>
+                                    <a href="#" x-on:click.prevent="open = false">Custom Range</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ck-chart-placeholder">
+                            <div class="ck-bar-set">
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#10b981;height:95px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
+                                <div class="ck-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
+                            <button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Prospecting</p>
+                                <p class="text-lg font-bold text-gray-900">1,225</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Qualified</p>
+                                <p class="text-lg font-bold text-gray-900">640</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Negotiation</p>
+                                <p class="text-lg font-bold text-gray-900">156</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Closed Won</p>
+                                <p class="text-lg font-bold text-gray-900">89</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
+                            </div>
+                        </div>
+                        <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">John Doe</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Alex Kowalski</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Emma Parker</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-blue text-[10px]">Development</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                                <div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#10b981;">AK</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>4</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-amber text-[10px]">Design</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#ec4899;">EP</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>2</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-green text-[10px]">Testing</span>
+                            <span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#f97316;">AK</div>
+                                <div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
+                                <div class="ck-avatar-item" style="background:#6366f1;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>5</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-purple text-[10px]">Research</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
+                                <div class="ck-avatar-item" style="background:#ec4899;">AK</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>3</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="p-5 border-b border-gray-100">
+                            <h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
+                            <p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
+                                    <input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
+                                    <input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
+                                <input type="email" value="john.doe@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
+                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                <div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
+                            </div>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
+                                <input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
+                                <textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
+                            <span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(287)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$89.00</span>
+                                <span class="text-sm text-gray-400 line-through">$129.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(156)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$249.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(92)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$59.00</span>
+                                <span class="text-sm text-gray-400 line-through">$79.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(423)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$149.00</span>
+                                <span class="text-sm text-gray-400 line-through">$179.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
diff --git a/Pages/Components/cards5.cshtml b/Pages/Components/cards5.cshtml
new file mode 100644
index 0000000..a9d3b79
--- /dev/null
+++ b/Pages/Components/cards5.cshtml
@@ -0,0 +1,547 @@
+@page "/cards5"
+@{
+    ViewData["Title"] = "Cards 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Css:cards-page.css"] = "css/cards-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
+            </div>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="space-y-2">
+                                <div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
+                                <div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
+                        <div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
+                                <div class="w-16 h-3 rounded bg-blue-100"></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                                <div class="h-3 rounded bg-sky-100"></div>
+                            </div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
+                        <div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
+                                <div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
+                            </div>
+                        </div>
+                        <div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
+                            <div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
+                            <div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
+                    </div>
+                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
+                        <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
+                        <div class="flex flex-col items-center justify-center h-full min-h-[180px]">
+                            <svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            <span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
+                            <div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
+                        </div>
+                        <div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-green-600 text-sm font-semibold"><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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
+                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
+                                <p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
+                                <div class="flex items-center gap-1.5 mt-2">
+                                    <span class="flex items-center text-red-500 text-sm font-semibold"><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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
+                                    <span class="text-xs text-gray-400">vs last month</span>
+                                </div>
+                            </div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
+                                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
+                            <div class="relative" x-data="{ open: false }">
+                                <button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" 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>
+                                <div class="ck-dropdown" x-bind:class="{ 'open': open }">
+                                    <a href="#" x-on:click.prevent="open = false">Today</a>
+                                    <a href="#" x-on:click.prevent="open = false">7 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">30 Days</a>
+                                    <a href="#" x-on:click.prevent="open = false">This Quarter</a>
+                                    <a href="#" x-on:click.prevent="open = false">Custom Range</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ck-chart-placeholder">
+                            <div class="ck-bar-set">
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#10b981;height:95px;"></div>
+                                <div class="ck-bar"></div>
+                                <div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
+                                <div class="ck-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
+                            <button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Prospecting</p>
+                                <p class="text-lg font-bold text-gray-900">1,225</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Qualified</p>
+                                <p class="text-lg font-bold text-gray-900">640</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Negotiation</p>
+                                <p class="text-lg font-bold text-gray-900">156</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
+                            </div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                                <p class="text-xs text-gray-400">Closed Won</p>
+                                <p class="text-lg font-bold text-gray-900">89</p>
+                                <div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
+                            </div>
+                        </div>
+                        <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">John Doe</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Alex Kowalski</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
+                        <div class="flex justify-center mb-3">
+                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
+                        </div>
+                        <h3 class="font-bold text-gray-900">Emma Parker</h3>
+                        <div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
+                        <div class="mt-3 space-y-1.5 text-xs text-gray-500">
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@company.com</div>
+                            <div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
+                        </div>
+                        <div class="mt-4 flex gap-2 justify-center">
+                            <button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
+                            <button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-blue text-[10px]">Development</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                                <div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#10b981;">AK</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>4</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-amber text-[10px]">Design</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#ec4899;">EP</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>2</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-green text-[10px]">Testing</span>
+                            <span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#f97316;">AK</div>
+                                <div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
+                                <div class="ck-avatar-item" style="background:#6366f1;">JD</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>5</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="chip chip-purple text-[10px]">Research</span>
+                            <span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
+                        <div class="mt-3">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
+                            <div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
+                        </div>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="ck-avatar-stack">
+                                <div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
+                                <div class="ck-avatar-item" style="background:#ec4899;">AK</div>
+                                <div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
+                                <div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-400">
+                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                                <span>3</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="p-5 border-b border-gray-100">
+                            <h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
+                            <p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
+                                    <input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                                <div>
+                                    <label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
+                                    <input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                </div>
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
+                                <input type="email" value="john.doe@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
+                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
+                            <div class="flex items-center gap-2">
+                                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
+                                <div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
+                            </div>
+                        </div>
+                        <div class="p-5 space-y-4">
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
+                                <input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
+                            </div>
+                            <div>
+                                <label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
+                                <textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
+                            </div>
+                        </div>
+                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
+                            <button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
+                            <button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
+                    <div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
+                            <span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(287)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$89.00</span>
+                                <span class="text-sm text-gray-400 line-through">$129.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(156)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$249.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(92)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$59.00</span>
+                                <span class="text-sm text-gray-400 line-through">$79.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                        <div class="ck-img-placeholder relative">
+                            <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                            <span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
+                        </div>
+                        <div class="p-4">
+                            <h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
+                            <div class="flex items-center gap-1 mt-1 ck-star-rating">
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                <span class="text-xs text-gray-400 ml-1">(423)</span>
+                            </div>
+                            <div class="flex items-center gap-2 mt-2">
+                                <span class="text-lg font-bold text-gray-900">$149.00</span>
+                                <span class="text-sm text-gray-400 line-through">$179.00</span>
+                            </div>
+                            <button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
diff --git a/Pages/Components/datatables1.cshtml b/Pages/Components/datatables1.cshtml
new file mode 100644
index 0000000..77b4995
--- /dev/null
+++ b/Pages/Components/datatables1.cshtml
@@ -0,0 +1,561 @@
+@page "/datatables1"
+@{
+    ViewData["Title"] = "Data Tables 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:datatables.js"] = "js/datatables.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">User login successful</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
+                    <span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
+                    </div>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <div class="relative flex-1 w-full sm:max-w-xs">
+                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            <input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
+                        </div>
+                        <div class="flex items-center gap-2 w-full sm:w-auto">
+                            <select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
+                                <option value="">All Categories</option>
+                                <option>Electronics</option>
+                                <option>Office Supplies</option>
+                                <option>Furniture</option>
+                                <option>Software</option>
+                                <option>Services</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody id="product-tbody">
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td>
+                                <td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">342</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td>
+                                <td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">128</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td>
+                                <td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">999</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td>
+                                <td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td>
+                                <td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">—</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td>
+                                <td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">89</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td>
+                                <td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">56</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td>
+                                <td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">500</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td>
+                                <td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
+                    <span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
+                </div>
+            </div>
+
+            <div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
+                    </div>
+                </div>
+                <div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
+                    <span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
+<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print Selected</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Change Status</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete Selected</button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="invoice-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100">
+                                    <input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Invoice No.</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
+                    <span>Total outstanding: <b class="text-red-500">$86,200</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="employee-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
+                                <th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Sales</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">New York, NY</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">San Francisco, CA</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Chicago, IL</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Finance</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Boston, MA</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
+                    <span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5" id="pagination-section">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and working pagination controls</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse min-w-[700px]">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Transaction ID</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Source Account</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Destination Account</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Amount</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Payment Method</th>
+                            </tr>
+                        </thead>
+                        <tbody id="transactions-tbody"></tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
+                    <span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
+                    <div class="flex items-center gap-1" id="transactions-page-btns"></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/datatables2.cshtml b/Pages/Components/datatables2.cshtml
new file mode 100644
index 0000000..e10021b
--- /dev/null
+++ b/Pages/Components/datatables2.cshtml
@@ -0,0 +1,561 @@
+@page "/datatables2"
+@{
+    ViewData["Title"] = "Data Tables 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:datatables.js"] = "js/datatables.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">User login successful</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
+                            </tr>
+                            <tr class="bg-white">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td>
+                            </tr>
+                            <tr class="bg-gray-50/60">
+                                <td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td>
+                                <td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td>
+                                <td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
+                    <span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
+                    </div>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <div class="relative flex-1 w-full sm:max-w-xs">
+                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            <input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
+                        </div>
+                        <div class="flex items-center gap-2 w-full sm:w-auto">
+                            <select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
+                                <option value="">All Categories</option>
+                                <option>Electronics</option>
+                                <option>Office Supplies</option>
+                                <option>Furniture</option>
+                                <option>Software</option>
+                                <option>Services</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
+                                    <div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody id="product-tbody">
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td>
+                                <td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">342</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td>
+                                <td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">128</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td>
+                                <td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">999</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td>
+                                <td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td>
+                                <td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">—</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td>
+                                <td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">89</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td>
+                                <td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">56</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td>
+                                <td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">500</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition">
+                                <td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td>
+                                <td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
+                    <span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
+                </div>
+            </div>
+
+            <div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
+                    </div>
+                </div>
+                <div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
+                    <span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
+<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print Selected</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Change Status</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete Selected</button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="invoice-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100">
+                                    <input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
+                                </th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Invoice No.</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
+                                <td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td>
+                                <td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td>
+                                <td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td>
+                                <td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
+                    <span>Total outstanding: <b class="text-red-500">$86,200</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="employee-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
+                                <th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Sales</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">New York, NY</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">San Francisco, CA</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Chicago, IL</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div>
+                                        <div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Finance</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="flex items-center justify-center gap-0.5">
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                        <svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+                                    </div>
+                                    <span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span>
+                                </td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
+                                <td class="px-4 py-3 text-center">
+                                    <div class="relative inline-block" x-data="{ open: false }">
+                                        <button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
+                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+                                        </button>
+                                        <div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
+                                            <a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
+                                            <a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="expand-detail hidden">
+                                <td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
+                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Boston, MA</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div>
+                                        <div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
+                    <span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5" id="pagination-section">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and working pagination controls</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse min-w-[700px]">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Transaction ID</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Source Account</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Destination Account</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Amount</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Payment Method</th>
+                            </tr>
+                        </thead>
+                        <tbody id="transactions-tbody"></tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
+                    <span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
+                    <div class="flex items-center gap-1" id="transactions-page-btns"></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/datatables3.cshtml b/Pages/Components/datatables3.cshtml
new file mode 100644
index 0000000..d0b1411
--- /dev/null
+++ b/Pages/Components/datatables3.cshtml
@@ -0,0 +1,244 @@
+@page "/datatables3"
+@{
+    ViewData["Title"] = "Data Tables 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:datatables.js"] = "js/datatables.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
+                    <span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
+                    </div>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <div class="relative flex-1 w-full sm:max-w-xs">
+                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            <input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
+                        </div>
+                        <div class="flex items-center gap-2 w-full sm:w-auto">
+                            <select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
+                                <option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                            </tr>
+                        </thead>
+                        <tbody id="product-tbody">
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
+                    <span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
+                </div>
+            </div>
+
+            <div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
+                    </div>
+                </div>
+                <div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
+                    <span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="invoice-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
+                    <span>Total outstanding: <b class="text-red-500">$86,200</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="employee-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
+                                <th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Sales</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Finance</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div></div></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
+                    <span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse min-w-[700px]">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
+                            </tr>
+                        </thead>
+                        <tbody id="transactions-tbody">
+                        </tbody>
+                    </table>
+                </div>
+                <div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
+                    <span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
+                    <div id="transactions-page-btns" class="flex items-center gap-1">
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/datatables4.cshtml b/Pages/Components/datatables4.cshtml
new file mode 100644
index 0000000..b8fb0a1
--- /dev/null
+++ b/Pages/Components/datatables4.cshtml
@@ -0,0 +1,245 @@
+@page "/datatables4"
+@{
+    ViewData["Title"] = "Data Tables 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:datatables.js"] = "js/datatables.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
+                    <span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
+                    </div>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <div class="relative flex-1 w-full sm:max-w-xs">
+                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            <input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
+                        </div>
+                        <div class="flex items-center gap-2 w-full sm:w-auto">
+                            <select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
+                                <option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                            </tr>
+                        </thead>
+                        <tbody id="product-tbody">
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
+                    <span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
+                </div>
+            </div>
+
+            <div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
+                    </div>
+                </div>
+                <div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
+                    <span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="invoice-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
+                    <span>Total outstanding: <b class="text-red-500">$86,200</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="employee-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
+                                <th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Sales</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Finance</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div></div></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
+                    <span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse min-w-[700px]">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
+                            </tr>
+                        </thead>
+                        <tbody id="transactions-tbody">
+                        </tbody>
+                    </table>
+                </div>
+                <div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
+                    <span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
+                    <div id="transactions-page-btns" class="flex items-center gap-1">
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/datatables5.cshtml b/Pages/Components/datatables5.cshtml
new file mode 100644
index 0000000..302404d
--- /dev/null
+++ b/Pages/Components/datatables5.cshtml
@@ -0,0 +1,245 @@
+@page "/datatables5"
+@{
+    ViewData["Title"] = "Data Tables 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:datatables.js"] = "js/datatables.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
+                            <tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
+                            <tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
+                    <span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
+                    </div>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <div class="relative flex-1 w-full sm:max-w-xs">
+                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            <input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
+                        </div>
+                        <div class="flex items-center gap-2 w-full sm:w-auto">
+                            <select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
+                                <option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
+                            </tr>
+                        </thead>
+                        <tbody id="product-tbody">
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
+                            <tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
+                    <span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
+                </div>
+            </div>
+
+            <div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
+                    </div>
+                </div>
+                <div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
+                    <span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="invoice-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
+                    <span>Total outstanding: <b class="text-red-500">$86,200</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse" id="employee-table">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
+                                <th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Sales</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div></div></td></tr>
+                            <tr class="bg-white hover:bg-gray-50/50 transition">
+                                <td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
+                                <td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div></div></td>
+                                <td class="px-4 py-3 text-sm text-gray-700">Finance</td>
+                                <td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
+                                <td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
+                                <td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
+                            </tr>
+                            <tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div></div></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+                    <span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
+                    <span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
+                <div class="p-5 border-b border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="w-full border-collapse min-w-[700px]">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
+                                <th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
+                                <th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
+                                <th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
+                            </tr>
+                        </thead>
+                        <tbody id="transactions-tbody">
+                        </tbody>
+                    </table>
+                </div>
+                <div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
+                    <span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
+                    <div id="transactions-page-btns" class="flex items-center gap-1">
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/forms1.cshtml b/Pages/Components/forms1.cshtml
new file mode 100644
index 0000000..e54f64b
--- /dev/null
+++ b/Pages/Components/forms1.cshtml
@@ -0,0 +1,94 @@
+@page "/forms1"
+@{
+    ViewData["Title"] = "Forms 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" 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><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div>
+                    </div>
+                    <div class="border-l border-gray-100 pl-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
+                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
+                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
+                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
+                <div class="space-y-5">
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
+                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
+                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/forms2.cshtml b/Pages/Components/forms2.cshtml
new file mode 100644
index 0000000..55528cc
--- /dev/null
+++ b/Pages/Components/forms2.cshtml
@@ -0,0 +1,94 @@
+@page "/forms2"
+@{
+    ViewData["Title"] = "Forms 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" 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><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div>
+                    </div>
+                    <div class="border-l border-gray-100 pl-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
+                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
+                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
+                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
+                <div class="space-y-5">
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
+                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
+                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/forms3.cshtml b/Pages/Components/forms3.cshtml
new file mode 100644
index 0000000..dee4f00
--- /dev/null
+++ b/Pages/Components/forms3.cshtml
@@ -0,0 +1,88 @@
+@page "/forms3"
+@{
+    ViewData["Title"] = "Forms 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" 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><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                    <div class="border-l border-gray-100 pl-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
+                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">15+ years in financial management and strategic planning.</textarea></div>
+                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
+                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
+                <div class="space-y-5">
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-indigo-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-indigo-600 min-w-[3rem]">11%</span></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
+                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
+                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/forms4.cshtml b/Pages/Components/forms4.cshtml
new file mode 100644
index 0000000..9fbfb2c
--- /dev/null
+++ b/Pages/Components/forms4.cshtml
@@ -0,0 +1,143 @@
+@page "/forms4"
+@{
+    ViewData["Title"] = "Forms 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;">
+                        <div class="flex items-center gap-2 mb-4">
+                            <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
+                            <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span>
+                        </div>
+                        <div class="space-y-4">
+                            <div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                            <div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                            <div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                        </div>
+                    </div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;">
+                        <div class="flex items-center gap-2 mb-4">
+                            <svg class="w-4 h-4 text-indigo-500" 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>
+                            <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                            <div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                            <div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                        </div>
+                    </div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;">
+                        <div class="flex items-center gap-2 mb-4">
+                            <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
+                            <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div>
+                            <div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
+                            <div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                    <div class="border-l border-gray-100 pl-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
+                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">15+ years in financial management and strategic planning.</textarea></div>
+                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
+                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div>
+                </div>
+                <div class="space-y-5">
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-indigo-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-indigo-600 min-w-[3rem]">11%</span></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div>
+                </div>
+                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                    <div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div>
+                </div>
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
+                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Manual</span></label></div></div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><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="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
+            </div>
+        </div>
diff --git a/Pages/Components/forms5.cshtml b/Pages/Components/forms5.cshtml
new file mode 100644
index 0000000..7b83527
--- /dev/null
+++ b/Pages/Components/forms5.cshtml
@@ -0,0 +1,93 @@
+@page "/forms5"
+@{
+    ViewData["Title"] = "Forms 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" 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><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
+                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                    <div class="border-l border-gray-100 pl-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
+                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
+                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
+                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
+                <div class="space-y-5">
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
+                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
+                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                </div>
+                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
+                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
+                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
+                </div>
+                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/pickers1.cshtml b/Pages/Components/pickers1.cshtml
new file mode 100644
index 0000000..14f95ac
--- /dev/null
+++ b/Pages/Components/pickers1.cshtml
@@ -0,0 +1,301 @@
+@page "/pickers1"
+@{
+    ViewData["Title"] = "Pickers 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
+                        <div class="relative">
+                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
+                                <option value="" disabled selected>Choose an option</option>
+                                <option value="option1">Option One</option>
+                                <option value="option2">Option Two</option>
+                                <option value="option3">Option Three</option>
+                                <option value="option4">Option Four</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            </div>
+                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <option value="" disabled selected>Search category</option>
+                                <option value="users">Users</option>
+                                <option value="orders">Orders</option>
+                                <option value="products">Products</option>
+                                <option value="invoices">Invoices</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
+                                    <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 x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
+                </div>
+                <div class="max-w-lg">
+                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
+                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
+                        <div class="relative">
+                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
+                                <template x-for="item in selected" :key="item">
+                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                        <span x-text="item"></span>
+                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
+                                            <svg class="w-3 h-3" 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>
+                                    </span>
+                                </template>
+                                <template x-if="selected.length === 0">
+                                    <span class="text-gray-400 py-1">Pick skills...</span>
+                                </template>
+                                <span class="ml-auto flex items-center">
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                                </span>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
+                                <template x-for="item in items" :key="item">
+                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
+                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
+                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        </div>
+                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
+                        <div class="relative">
+                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <span class="text-gray-400 text-sm">—</span>
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
+                        <div x-data="{ val: '2026-07-06' }" class="relative">
+                            <div class="relative">
+                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
+                                    <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>
+                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
+                        <div class="relative">
+                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
+                    </div>
+                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
+                        <div class="relative">
+                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="flex items-center gap-2">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <span x-text="selected"></span>
+                                </div>
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="t in times" :key="t">
+                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <div class="relative flex-1">
+                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
+                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
+                            <div class="flex items-center gap-2">
+                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
+                                    <span x-text="selected" class="text-gray-700"></span>
+                                    <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
+                                <div class="grid grid-cols-4 gap-2">
+                                    <template x-for="c in colors" :key="c">
+                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
+                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
+                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
+                                    <span x-text="selected"></span>
+                                </span>
+                                <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
+                                <template x-for="opt in options" :key="opt.label">
+                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
+                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
+                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/pickers2.cshtml b/Pages/Components/pickers2.cshtml
new file mode 100644
index 0000000..2abe582
--- /dev/null
+++ b/Pages/Components/pickers2.cshtml
@@ -0,0 +1,301 @@
+@page "/pickers2"
+@{
+    ViewData["Title"] = "Pickers 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
+                        <div class="relative">
+                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
+                                <option value="" disabled selected>Choose an option</option>
+                                <option value="option1">Option One</option>
+                                <option value="option2">Option Two</option>
+                                <option value="option3">Option Three</option>
+                                <option value="option4">Option Four</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            </div>
+                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <option value="" disabled selected>Search category</option>
+                                <option value="users">Users</option>
+                                <option value="orders">Orders</option>
+                                <option value="products">Products</option>
+                                <option value="invoices">Invoices</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
+                                    <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 x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
+                </div>
+                <div class="max-w-lg">
+                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
+                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
+                        <div class="relative">
+                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
+                                <template x-for="item in selected" :key="item">
+                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                        <span x-text="item"></span>
+                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
+                                            <svg class="w-3 h-3" 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>
+                                    </span>
+                                </template>
+                                <template x-if="selected.length === 0">
+                                    <span class="text-gray-400 py-1">Pick skills...</span>
+                                </template>
+                                <span class="ml-auto flex items-center">
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                                </span>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
+                                <template x-for="item in items" :key="item">
+                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
+                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
+                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        </div>
+                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
+                        <div class="relative">
+                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <span class="text-gray-400 text-sm">—</span>
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
+                        <div x-data="{ val: '2026-07-06' }" class="relative">
+                            <div class="relative">
+                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
+                                    <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>
+                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
+                        <div class="relative">
+                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
+                    </div>
+                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
+                        <div class="relative">
+                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="flex items-center gap-2">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                    <span x-text="selected"></span>
+                                </div>
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="t in times" :key="t">
+                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <div class="relative flex-1">
+                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
+                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
+                            <div class="flex items-center gap-2">
+                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
+                                    <span x-text="selected" class="text-gray-700"></span>
+                                    <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
+                                <div class="grid grid-cols-4 gap-2">
+                                    <template x-for="c in colors" :key="c">
+                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
+                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
+                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
+                                    <span x-text="selected"></span>
+                                </span>
+                                <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
+                                <template x-for="opt in options" :key="opt.label">
+                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
+                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
+                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/pickers3.cshtml b/Pages/Components/pickers3.cshtml
new file mode 100644
index 0000000..72ed5e4
--- /dev/null
+++ b/Pages/Components/pickers3.cshtml
@@ -0,0 +1,302 @@
+@page "/pickers3"
+@{
+    ViewData["Title"] = "Pickers 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
+                        <div class="relative">
+                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
+                                <option value="" disabled selected>Choose an option</option>
+                                <option value="option1">Option One</option>
+                                <option value="option2">Option Two</option>
+                                <option value="option3">Option Three</option>
+                                <option value="option4">Option Four</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            </div>
+                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <option value="" disabled selected>Search category</option>
+                                <option value="users">Users</option>
+                                <option value="orders">Orders</option>
+                                <option value="products">Products</option>
+                                <option value="invoices">Invoices</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
+                                    <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 x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
+                </div>
+                <div class="max-w-lg">
+                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
+                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
+                        <div class="relative">
+                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
+                                <template x-for="item in selected" :key="item">
+                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                        <span x-text="item"></span>
+                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
+                                            <svg class="w-3 h-3" 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>
+                                    </span>
+                                </template>
+                                <template x-if="selected.length === 0">
+                                    <span class="text-gray-400 py-1">Pick skills...</span>
+                                </template>
+                                <span class="ml-auto flex items-center">
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                                </span>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
+                                <template x-for="item in items" :key="item">
+                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
+                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
+                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        </div>
+                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
+                        <div class="relative">
+                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <span class="text-gray-400 text-sm">—</span>
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
+                        <div x-data="{ val: '2026-07-06' }" class="relative">
+                            <div class="relative">
+                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
+                                    <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>
+                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
+                        <div class="relative">
+                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
+                    </div>
+                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
+                        <div class="relative">
+                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <div class="flex items-center gap-2">
+                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                        <span x-text="selected"></span>
+                                    </div>
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="t in times" :key="t">
+                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <div class="relative flex-1">
+                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
+                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
+                            <div class="flex items-center gap-2">
+                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
+                                    <span x-text="selected" class="text-gray-700"></span>
+                                    <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
+                                <div class="grid grid-cols-4 gap-2">
+                                    <template x-for="c in colors" :key="c">
+                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
+                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
+                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
+                                    <span x-text="selected"></span>
+                                </span>
+                                <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
+                                <template x-for="opt in options" :key="opt.label">
+                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
+                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
+                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/pickers4.cshtml b/Pages/Components/pickers4.cshtml
new file mode 100644
index 0000000..a6ca159
--- /dev/null
+++ b/Pages/Components/pickers4.cshtml
@@ -0,0 +1,302 @@
+@page "/pickers4"
+@{
+    ViewData["Title"] = "Pickers 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
+                        <div class="relative">
+                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
+                                <option value="" disabled selected>Choose an option</option>
+                                <option value="option1">Option One</option>
+                                <option value="option2">Option Two</option>
+                                <option value="option3">Option Three</option>
+                                <option value="option4">Option Four</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            </div>
+                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <option value="" disabled selected>Search category</option>
+                                <option value="users">Users</option>
+                                <option value="orders">Orders</option>
+                                <option value="products">Products</option>
+                                <option value="invoices">Invoices</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
+                                    <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 x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
+                </div>
+                <div class="max-w-lg">
+                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
+                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
+                        <div class="relative">
+                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
+                                <template x-for="item in selected" :key="item">
+                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                        <span x-text="item"></span>
+                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
+                                            <svg class="w-3 h-3" 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>
+                                    </span>
+                                </template>
+                                <template x-if="selected.length === 0">
+                                    <span class="text-gray-400 py-1">Pick skills...</span>
+                                </template>
+                                <span class="ml-auto flex items-center">
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                                </span>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
+                                <template x-for="item in items" :key="item">
+                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
+                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
+                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        </div>
+                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
+                        <div class="relative">
+                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <span class="text-gray-400 text-sm">—</span>
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
+                        <div x-data="{ val: '2026-07-06' }" class="relative">
+                            <div class="relative">
+                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
+                                    <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>
+                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
+                        <div class="relative">
+                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
+                    </div>
+                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
+                        <div class="relative">
+                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <div class="flex items-center gap-2">
+                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                        <span x-text="selected"></span>
+                                    </div>
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="t in times" :key="t">
+                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <div class="relative flex-1">
+                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
+                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
+                            <div class="flex items-center gap-2">
+                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
+                                    <span x-text="selected" class="text-gray-700"></span>
+                                    <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
+                                <div class="grid grid-cols-4 gap-2">
+                                    <template x-for="c in colors" :key="c">
+                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
+                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
+                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
+                                    <span x-text="selected"></span>
+                                </span>
+                                <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
+                                <template x-for="opt in options" :key="opt.label">
+                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
+                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
+                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/pickers5.cshtml b/Pages/Components/pickers5.cshtml
new file mode 100644
index 0000000..f4da479
--- /dev/null
+++ b/Pages/Components/pickers5.cshtml
@@ -0,0 +1,302 @@
+@page "/pickers5"
+@{
+    ViewData["Title"] = "Pickers 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
+                        <div class="relative">
+                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
+                                <option value="" disabled selected>Choose an option</option>
+                                <option value="option1">Option One</option>
+                                <option value="option2">Option Two</option>
+                                <option value="option3">Option Three</option>
+                                <option value="option4">Option Four</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                            </div>
+                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <option value="" disabled selected>Search category</option>
+                                <option value="users">Users</option>
+                                <option value="orders">Orders</option>
+                                <option value="products">Products</option>
+                                <option value="invoices">Invoices</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            </div>
+                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
+                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                                </div>
+                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
+                                    <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 x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="(item, idx) in filtered()" :key="idx">
+                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
+                </div>
+                <div class="max-w-lg">
+                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
+                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
+                        <div class="relative">
+                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
+                                <template x-for="item in selected" :key="item">
+                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                        <span x-text="item"></span>
+                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
+                                            <svg class="w-3 h-3" 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>
+                                    </span>
+                                </template>
+                                <template x-if="selected.length === 0">
+                                    <span class="text-gray-400 py-1">Pick skills...</span>
+                                </template>
+                                <span class="ml-auto flex items-center">
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                                </span>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
+                                <template x-for="item in items" :key="item">
+                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
+                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
+                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        </div>
+                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
+                        <div class="relative">
+                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <span class="text-gray-400 text-sm">—</span>
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
+                        <div x-data="{ val: '2026-07-06' }" class="relative">
+                            <div class="relative">
+                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
+                                    <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>
+                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
+                        <div class="relative">
+                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
+                    </div>
+                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
+                        <div class="relative">
+                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <div class="flex items-center gap-2">
+                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                        <span x-text="selected"></span>
+                                    </div>
+                                    <svg class="w-4 h-4 text-gray-400" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
+                                <template x-for="t in times" :key="t">
+                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
+                        <div class="flex items-center gap-2">
+                            <div class="relative flex-1">
+                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                                </div>
+                            </div>
+                            <div class="relative flex-1">
+                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
+                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
+                            <div class="flex items-center gap-2">
+                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
+                                    <span x-text="selected" class="text-gray-700"></span>
+                                    <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            </div>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
+                                <div class="grid grid-cols-4 gap-2">
+                                    <template x-for="c in colors" :key="c">
+                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
+                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
+                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
+                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
+                                    <span x-text="selected"></span>
+                                </span>
+                                <svg class="w-4 h-4 text-gray-400 ml-auto" 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>
+                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
+                                <template x-for="opt in options" :key="opt.label">
+                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
+                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
+                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/selection1.cshtml b/Pages/Components/selection1.cshtml
new file mode 100644
index 0000000..bf94f2a
--- /dev/null
+++ b/Pages/Components/selection1.cshtml
@@ -0,0 +1,372 @@
+@page "/selection1"
+@{
+    ViewData["Title"] = "Selection 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Remember me</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Send notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled unchecked</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled checked</span>
+                            </label>
+                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Indeterminate state</span>
+                            </label>
+                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Email notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">SMS notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Push notifications</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
+                    </div>
+                    <div x-data="{ selected: 'daily' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
+                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
+                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['low','medium','high']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                    </div>
+                    <div x-data="{ selected: 'starter' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
+                        <div class="space-y-2.5">
+                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
+                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Wi-Fi</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Bluetooth</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Dark Mode</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Notifications</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">VPN</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Auto-sync</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Legacy mode</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Beta features</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Experimental</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 50 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
+                        <div class="px-1 py-4">
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
+                    </div>
+                    <div x-data="{ val: 65 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
+                        <div class="relative pt-7 px-1">
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
+                    </div>
+                    <div x-data="{ val: 3 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
+                        <div class="relative pt-6 px-1">
+                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
+                                <template x-for="i in [1,2,3,4,5]" :key="i">
+                                    <div class="flex flex-col items-center">
+                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
+                                    </div>
+                                </template>
+                            </div>
+                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
+                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 75 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 30 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 42 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
+                        <div class="flex items-center gap-3">
+                            <span class="text-xs text-gray-500 font-semibold">$0</span>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-xs text-gray-500 font-semibold">$100</span>
+                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
+                </div>
+                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
+                            <div class="space-y-2">
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
+                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
+                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
+                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
+                            <div class="space-y-2.5">
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
+                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
+                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
+                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/selection2.cshtml b/Pages/Components/selection2.cshtml
new file mode 100644
index 0000000..bc9c0e0
--- /dev/null
+++ b/Pages/Components/selection2.cshtml
@@ -0,0 +1,372 @@
+@page "/selection2"
+@{
+    ViewData["Title"] = "Selection 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Remember me</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Send notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled unchecked</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled checked</span>
+                            </label>
+                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Indeterminate state</span>
+                            </label>
+                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Email notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">SMS notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Push notifications</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
+                    </div>
+                    <div x-data="{ selected: 'daily' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
+                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
+                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['low','medium','high']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                    </div>
+                    <div x-data="{ selected: 'starter' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
+                        <div class="space-y-2.5">
+                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
+                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Wi-Fi</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Bluetooth</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Dark Mode</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Notifications</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">VPN</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Auto-sync</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Legacy mode</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Beta features</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Experimental</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 50 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
+                        <div class="px-1 py-4">
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
+                    </div>
+                    <div x-data="{ val: 65 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
+                        <div class="relative pt-7 px-1">
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
+                    </div>
+                    <div x-data="{ val: 3 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
+                        <div class="relative pt-6 px-1">
+                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
+                                <template x-for="i in [1,2,3,4,5]" :key="i">
+                                    <div class="flex flex-col items-center">
+                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
+                                    </div>
+                                </template>
+                            </div>
+                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
+                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 75 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 30 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 42 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
+                        <div class="flex items-center gap-3">
+                            <span class="text-xs text-gray-500 font-semibold">$0</span>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-xs text-gray-500 font-semibold">$100</span>
+                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
+                </div>
+                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
+                            <div class="space-y-2">
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
+                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
+                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
+                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
+                            <div class="space-y-2.5">
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
+                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
+                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
+                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/selection3.cshtml b/Pages/Components/selection3.cshtml
new file mode 100644
index 0000000..f7f6676
--- /dev/null
+++ b/Pages/Components/selection3.cshtml
@@ -0,0 +1,372 @@
+@page "/selection3"
+@{
+    ViewData["Title"] = "Selection 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Remember me</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Send notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled unchecked</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled checked</span>
+                            </label>
+                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Indeterminate state</span>
+                            </label>
+                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Email notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">SMS notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Push notifications</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
+                    </div>
+                    <div x-data="{ selected: 'daily' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
+                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
+                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['low','medium','high']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                    </div>
+                    <div x-data="{ selected: 'starter' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
+                        <div class="space-y-2.5">
+                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
+                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Wi-Fi</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Bluetooth</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Dark Mode</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Notifications</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">VPN</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Auto-sync</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Legacy mode</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Beta features</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Experimental</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 50 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
+                        <div class="px-1 py-4">
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
+                    </div>
+                    <div x-data="{ val: 65 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
+                        <div class="relative pt-7 px-1">
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
+                    </div>
+                    <div x-data="{ val: 3 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
+                        <div class="relative pt-6 px-1">
+                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
+                                <template x-for="i in [1,2,3,4,5]" :key="i">
+                                    <div class="flex flex-col items-center">
+                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
+                                    </div>
+                                </template>
+                            </div>
+                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
+                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 75 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 30 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 42 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
+                        <div class="flex items-center gap-3">
+                            <span class="text-xs text-gray-500 font-semibold">$0</span>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-xs text-gray-500 font-semibold">$100</span>
+                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
+                </div>
+                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
+                            <div class="space-y-2">
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
+                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
+                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
+                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
+                            <div class="space-y-2.5">
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
+                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
+                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
+                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/selection4.cshtml b/Pages/Components/selection4.cshtml
new file mode 100644
index 0000000..3340371
--- /dev/null
+++ b/Pages/Components/selection4.cshtml
@@ -0,0 +1,372 @@
+@page "/selection4"
+@{
+    ViewData["Title"] = "Selection 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Remember me</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Send notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled unchecked</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled checked</span>
+                            </label>
+                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Indeterminate state</span>
+                            </label>
+                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Email notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">SMS notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Push notifications</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
+                    </div>
+                    <div x-data="{ selected: 'daily' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
+                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
+                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['low','medium','high']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                    </div>
+                    <div x-data="{ selected: 'starter' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
+                        <div class="space-y-2.5">
+                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
+                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Wi-Fi</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Bluetooth</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Dark Mode</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Notifications</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">VPN</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Auto-sync</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Legacy mode</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Beta features</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Experimental</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 50 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
+                        <div class="px-1 py-4">
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
+                    </div>
+                    <div x-data="{ val: 65 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
+                        <div class="relative pt-7 px-1">
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
+                    </div>
+                    <div x-data="{ val: 3 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
+                        <div class="relative pt-6 px-1">
+                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
+                                <template x-for="i in [1,2,3,4,5]" :key="i">
+                                    <div class="flex flex-col items-center">
+                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
+                                    </div>
+                                </template>
+                            </div>
+                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
+                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 75 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 30 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 42 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
+                        <div class="flex items-center gap-3">
+                            <span class="text-xs text-gray-500 font-semibold">$0</span>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-xs text-gray-500 font-semibold">$100</span>
+                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
+                </div>
+                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
+                            <div class="space-y-2">
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
+                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
+                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
+                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
+                            <div class="space-y-2.5">
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
+                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
+                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
+                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/selection5.cshtml b/Pages/Components/selection5.cshtml
new file mode 100644
index 0000000..1125002
--- /dev/null
+++ b/Pages/Components/selection5.cshtml
@@ -0,0 +1,372 @@
+@page "/selection5"
+@{
+    ViewData["Title"] = "Selection 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Remember me</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Send notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Enable two-factor auth</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
+                        <div class="space-y-2.5">
+                            <label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
+                            </label>
+                            <label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                <input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled unchecked</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
+                                <span class="text-sm text-gray-400">Disabled checked</span>
+                            </label>
+                            <label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Indeterminate state</span>
+                            </label>
+                            <label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                </div>
+                                <span class="text-sm text-gray-700">Toggle indeterminate</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
+                        <div class="space-y-2.5">
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Email notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">SMS notifications</span>
+                            </label>
+                            <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                <span class="text-sm text-gray-700">Push notifications</span>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
+                    </div>
+                    <div x-data="{ selected: 'daily' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
+                        <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['daily','weekly','monthly']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
+                        <div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                            <template x-for="opt in ['low','medium','high']" :key="opt">
+                                <label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                    <input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
+                                    <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                </label>
+                            </template>
+                        </div>
+                    </div>
+                    <div x-data="{ selected: 'starter' }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
+                        <div class="space-y-2.5">
+                            <template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
+                                <label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
+                                    <input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
+                                    <div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
+                                </label>
+                            </template>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Wi-Fi</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Bluetooth</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Dark Mode</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
+                        <div class="space-y-3">
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Notifications</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">VPN</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
+                                </button>
+                            </label>
+                            <label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
+                                <span class="text-sm text-gray-700">Auto-sync</span>
+                                <button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
+                                    <span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
+                                        <svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                                        <svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
+                                    </span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
+                        <div class="space-y-3">
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Legacy mode</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Beta features</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
+                                </button>
+                            </label>
+                            <label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
+                                <span class="text-sm text-gray-400">Experimental</span>
+                                <button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
+                                </button>
+                            </label>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 50 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
+                        <div class="px-1 py-4">
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
+                    </div>
+                    <div x-data="{ val: 65 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
+                        <div class="relative pt-7 px-1">
+                            <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
+                            <input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
+                        <p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
+                    </div>
+                    <div x-data="{ val: 3 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
+                        <div class="relative pt-6 px-1">
+                            <div class="absolute top-0 left-0 right-0 flex justify-between px-0">
+                                <template x-for="i in [1,2,3,4,5]" :key="i">
+                                    <div class="flex flex-col items-center">
+                                        <div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
+                                    </div>
+                                </template>
+                            </div>
+                            <input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
+                            <div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
+                    </div>
+                </div>
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div x-data="{ val: 75 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 30 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
+                        <div class="flex items-center gap-3">
+                            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
+                        </div>
+                    </div>
+                    <div x-data="{ val: 42 }">
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
+                        <div class="flex items-center gap-3">
+                            <span class="text-xs text-gray-500 font-semibold">$0</span>
+                            <input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
+                            <span class="text-xs text-gray-500 font-semibold">$100</span>
+                            <span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                <div class="flex items-center justify-between mb-4">
+                    <div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
+                </div>
+                <div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
+                            <div class="space-y-2">
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
+                                </label>
+                                <label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
+                                    <div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
+                            <div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
+                                <template x-for="opt in ['realtime','hourly','daily']" :key="opt">
+                                    <label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
+                                        <input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
+                                        <span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
+                            <div class="space-y-2.5">
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
+                                    <button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                                <label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
+                                    <div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
+                                    <button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
+                                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
+                                    </button>
+                                </label>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
+                            <div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+                                    <input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
+                                    <span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Components/tabs1.cshtml b/Pages/Components/tabs1.cshtml
new file mode 100644
index 0000000..e11e9d1
--- /dev/null
+++ b/Pages/Components/tabs1.cshtml
@@ -0,0 +1,188 @@
+@page "/tabs1"
+@{
+    ViewData["Title"] = "Tabs 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
+    ViewData["Js:tabs.js"] = "js/tabs.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
+                        <option selected>All Sections</option>
+                        <option>Underline Tabs</option>
+                        <option>Pill Tabs</option>
+                        <option>Vertical Tabs</option>
+                        <option>Card Tabs</option>
+                        <option>Animated Tabs</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3>
+                        <p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p>
+                    </div>
+                </div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
+                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content">
+                            <div class="space-y-4">
+                                <div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div>
+                                <div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div>
+                                <div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div>
+                            </div>
+                        </div>
+                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-900">Pill Tabs</h3>
+                        <p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p>
+                    </div>
+                </div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
+                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
+                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
+                    </div>
+                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full">
+                            <div class="space-y-3">
+                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
+                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
+                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
+                            </div>
+                        </div>
+                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-900">Vertical Tabs</h3>
+                        <p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
+                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
+                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-5">
+                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-900">Card Tabs</h3>
+                        <p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
+                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')">
+                            <div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div>
+                            <div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div>
+                        </button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')">
+                            <div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
+                            <div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div>
+                        </button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')">
+                            <div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div>
+                            <div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div>
+                        </button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')">
+                            <div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
+                            <div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div>
+                        </button>
+                    </div>
+                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
+                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-gray-900">Animated Tabs</h3>
+                        <p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p>
+                    </div>
+                </div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
+                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
+                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
+                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/tabs2.cshtml b/Pages/Components/tabs2.cshtml
new file mode 100644
index 0000000..5fed3ba
--- /dev/null
+++ b/Pages/Components/tabs2.cshtml
@@ -0,0 +1,124 @@
+@page "/tabs2"
+@{
+    ViewData["Title"] = "Tabs 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
+    ViewData["Js:tabs.js"] = "js/tabs.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
+                        <option selected>All Sections</option>
+                        <option>Underline Tabs</option>
+                        <option>Pill Tabs</option>
+                        <option>Vertical Tabs</option>
+                        <option>Card Tabs</option>
+                        <option>Animated Tabs</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
+                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
+                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
+                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
+                    </div>
+                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
+                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
+                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
+                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-5">
+                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
+                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
+                    </div>
+                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
+                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
+                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
+                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
+                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/tabs3.cshtml b/Pages/Components/tabs3.cshtml
new file mode 100644
index 0000000..17f5a5a
--- /dev/null
+++ b/Pages/Components/tabs3.cshtml
@@ -0,0 +1,124 @@
+@page "/tabs3"
+@{
+    ViewData["Title"] = "Tabs 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
+    ViewData["Js:tabs.js"] = "js/tabs.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
+                        <option selected>All Sections</option>
+                        <option>Underline Tabs</option>
+                        <option>Pill Tabs</option>
+                        <option>Vertical Tabs</option>
+                        <option>Card Tabs</option>
+                        <option>Animated Tabs</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
+                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
+                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
+                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
+                    </div>
+                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
+                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
+                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
+                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-5">
+                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
+                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
+                    </div>
+                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
+                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
+                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
+                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
+                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/tabs4.cshtml b/Pages/Components/tabs4.cshtml
new file mode 100644
index 0000000..231c346
--- /dev/null
+++ b/Pages/Components/tabs4.cshtml
@@ -0,0 +1,124 @@
+@page "/tabs4"
+@{
+    ViewData["Title"] = "Tabs 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
+    ViewData["Js:tabs.js"] = "js/tabs.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
+                        <option selected>All Sections</option>
+                        <option>Underline Tabs</option>
+                        <option>Pill Tabs</option>
+                        <option>Vertical Tabs</option>
+                        <option>Card Tabs</option>
+                        <option>Animated Tabs</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
+                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
+                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
+                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
+                    </div>
+                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
+                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
+                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
+                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-5">
+                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
+                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
+                    </div>
+                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
+                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
+                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
+                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
+                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Components/tabs5.cshtml b/Pages/Components/tabs5.cshtml
new file mode 100644
index 0000000..0252e1a
--- /dev/null
+++ b/Pages/Components/tabs5.cshtml
@@ -0,0 +1,124 @@
+@page "/tabs5"
+@{
+    ViewData["Title"] = "Tabs 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
+    ViewData["Js:tabs.js"] = "js/tabs.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
+                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
+                        <option selected>All Sections</option>
+                        <option>Underline Tabs</option>
+                        <option>Pill Tabs</option>
+                        <option>Vertical Tabs</option>
+                        <option>Card Tabs</option>
+                        <option>Animated Tabs</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
+                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
+                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
+                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
+                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
+                    </div>
+                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
+                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
+                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
+                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
+                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-5">
+                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
+                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
+                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
+                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
+                    </div>
+                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
+                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
+                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
+                <div class="border border-gray-100 rounded-xl overflow-hidden">
+                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
+                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
+                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
+                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
+                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
+                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-crm1.cshtml b/Pages/Dashboard/dashboard-crm1.cshtml
new file mode 100644
index 0000000..1f4f4cd
--- /dev/null
+++ b/Pages/Dashboard/dashboard-crm1.cshtml
@@ -0,0 +1,441 @@
+@page "/dashboard-crm1"
+@{
+    ViewData["Title"] = "Dashboard CRM 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-crm.js"] = "js/dashboard-crm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Won</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">LD</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">New</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Updated</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">EM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Sent</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">68% / 65%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">42% / 40%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">34% / 32%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
+                            <div class="text-right"><span class="chip chip-blue">-12%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-purple">▼ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
+                            <div class="text-right"><span class="chip chip-orange">▲ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-red">▲ 8%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
+                                    <tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
+                                    <tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
+                                    <tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
+                                    <tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
+                                    <tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
+                                    <tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
+                                    <tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
+                                    <tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
+                                    <tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
+                                    <tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
+                                    <tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
+                                    <tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CT-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-crm2.cshtml b/Pages/Dashboard/dashboard-crm2.cshtml
new file mode 100644
index 0000000..5b82a12
--- /dev/null
+++ b/Pages/Dashboard/dashboard-crm2.cshtml
@@ -0,0 +1,443 @@
+@page "/dashboard-crm2"
+@{
+    ViewData["Title"] = "Dashboard CRM 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-crm.js"] = "js/dashboard-crm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-crm3.cshtml b/Pages/Dashboard/dashboard-crm3.cshtml
new file mode 100644
index 0000000..1adbbe1
--- /dev/null
+++ b/Pages/Dashboard/dashboard-crm3.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-crm3"
+@{
+    ViewData["Title"] = "Dashboard CRM 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-crm.js"] = "js/dashboard-crm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-crm4.cshtml b/Pages/Dashboard/dashboard-crm4.cshtml
new file mode 100644
index 0000000..99b475c
--- /dev/null
+++ b/Pages/Dashboard/dashboard-crm4.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-crm4"
+@{
+    ViewData["Title"] = "Dashboard CRM 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-crm.js"] = "js/dashboard-crm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-crm5.cshtml b/Pages/Dashboard/dashboard-crm5.cshtml
new file mode 100644
index 0000000..5065d47
--- /dev/null
+++ b/Pages/Dashboard/dashboard-crm5.cshtml
@@ -0,0 +1,372 @@
+@page "/dashboard-crm5"
+@{
+    ViewData["Title"] = "Dashboard CRM 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-crm.js"] = "js/dashboard-crm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+            <div class="lg:col-span-5 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div class="lg:col-span-2 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS deal</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Mid-market upgrade</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Proposal</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Startup onboarding</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>Contract renewal Q3</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Closing</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Closed</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · Enterprise</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Won</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">LD</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Assigned</b> — Lead: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">New</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">OP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stage Updated</b> — Deal DL-2026-0741</p><p class="text-xs text-gray-400 mt-0.5">📋 Moved to Negotiation · $42,800</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Updated</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">EM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q3 Launch</p><p class="text-xs text-gray-400 mt-0.5">🧾 2,450 recipients · Open rate: 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Sent</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,225</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:50%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">1,225 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:52%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">640 / 89</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:47%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Support backlog</p></div>
+                            <div class="text-right"><span class="chip chip-blue">142</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">2.4hrs</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">4.2/5</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">4.2hrs</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">WEB-01</td><td>Website Organic</td><td class="font-mono text-xs text-green-600">1,200</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">REF-01</td><td>Referral Program</td><td class="font-mono text-xs text-green-600">860</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">SOC-01</td><td>Social Media</td><td class="font-mono text-xs text-green-600">740</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">EML-01</td><td>Email Campaigns</td><td class="font-mono text-xs text-green-600">490</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">PRT-01</td><td>Partner Network</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">EVT-01</td><td>Events & Webinars</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">280</td></tr>
+                                    <tr><td class="font-mono text-xs">DIR-01</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">195</td></tr>
+                                    <tr><td class="font-mono text-xs">ADS-01</td><td>Paid Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">180</td></tr>
+                                    <tr><td class="font-mono text-xs">CON-01</td><td>Content Marketing</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">145</td></tr>
+                                    <tr><td class="font-mono text-xs">WOM-01</td><td>Word of Mouth</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">120</td></tr>
+                                    <tr><td class="font-mono text-xs">BLG-01</td><td>Blog & SEO</td><td class="font-mono text-xs text-green-600">320</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">MKT-01</td><td>Marketplace</td><td class="font-mono text-xs text-green-600">280</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">MOB-01</td><td>Mobile App</td><td class="font-mono text-xs text-green-600">210</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">API-01</td><td>API Integration</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">160</td></tr>
+                                    <tr><td class="font-mono text-xs">RES-01</td><td>Research Portal</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CT-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-eam1.cshtml b/Pages/Dashboard/dashboard-eam1.cshtml
new file mode 100644
index 0000000..ae9e910
--- /dev/null
+++ b/Pages/Dashboard/dashboard-eam1.cshtml
@@ -0,0 +1,371 @@
+@page "/dashboard-eam1"
+@{
+    ViewData["Title"] = "Dashboard EAM 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-eam.js"] = "js/dashboard-eam.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                    <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">527 ▲ 3.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Vendors</p><p class="mm-sub">142 ▲ 6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Technicians</p><p class="mm-sub">87 ▲ 5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Facilities</p><p class="mm-sub">12 ▲ 1</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Asset Age</p><p class="mm-sub">6.8 years</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Maintenance</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Production <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Utilities <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Infrastructure <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Transport <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Facilities <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age 6.8yrs</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health 87.3%</span><span class="font-semibold text-gray-900">87.3%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Work orders by priority</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Critical</p><p class="text-sm font-bold text-green-700">312</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">High</p><p class="text-sm font-bold text-amber-600">486</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Medium</p><p class="text-sm font-bold text-red-600">342</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+142</span><p class="text-gray-400">PM</p></div>
+                        <div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
+                        <div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly PM - Assembly line</td><td class="text-xs"><span class="chip chip-blue">High</span></td><td><span class="chip chip-green">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Vibration analysis - Pump #4</td><td class="text-xs"><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">In Progress</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Bearing replacement - Motor B2</td><td class="text-xs"><span class="chip chip-red">Critical</span></td><td><span class="chip chip-indigo">In Progress</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Inspection - Safety valve #12</td><td class="text-xs"><span class="chip chip-indigo">Low</span></td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">PM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PM Completed</b> — WO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">🔧 Machine #A24 · Line 3</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Done</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">CM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Corrective Action</b> — Pump #B7</p><p class="text-xs text-gray-400 mt-0.5">🔧 Seal replaced · Back online</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Resolved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">IN</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Inspection</b> — Safety valve #C12</p><p class="text-xs text-gray-400 mt-0.5">📋 Certified · 6 month cycle</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Passed</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">WO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Work Order</b> — Calibration #D05</p><p class="text-xs text-gray-400 mt-0.5">🧾 Due today · Priority Medium</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Scheduled</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PM Compliance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Schedule</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98% / 95%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Priority</p>
+                                        <span class="text-[11px] font-semibold">92% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Routine</p>
+                                        <span class="text-[11px] font-semibold text-green-600">95% / 100%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:95%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Emergency</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89% / 85%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:105%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% · 124</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8% · 112</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1% · 98</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% · 87</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Weekly PM</p><p class="text-[10px] text-gray-400">Lubrication & inspection</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Biweekly PM</p><p class="text-[10px] text-gray-400">Belt tension & alignment</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Monthly PM</p><p class="text-[10px] text-gray-400">Filter replacement</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual</p><p class="text-[10px] text-gray-400">Full system overhaul</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset</th><th>Location</th><th>Frequency</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CNC-01</td><td>Building A</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">BLR-02</td><td>Plant 2</td><td class="text-xs">Biweekly</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CMP-07</td><td>Basement</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CNV-03</td><td>Line 3</td><td class="text-xs">Weekly</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">HVAC-01</td><td>Office</td><td class="text-xs">Quarterly</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">TRF-01</td><td>Substation</td><td class="text-xs">Semi-annual</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PM-01</td><td>Pump Station</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">GEN-01</td><td>Power Room</td><td class="text-xs">Quarterly</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">RBT-02</td><td>Assembly</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CHL-01</td><td>Cooling Plant</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">ELV-03</td><td>Tower B</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CTW-01</td><td>Rooftop</td><td class="text-xs">Biweekly</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-eam2.cshtml b/Pages/Dashboard/dashboard-eam2.cshtml
new file mode 100644
index 0000000..badaaa9
--- /dev/null
+++ b/Pages/Dashboard/dashboard-eam2.cshtml
@@ -0,0 +1,408 @@
+@page "/dashboard-eam2"
+@{
+    ViewData["Title"] = "Dashboard EAM 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-eam.js"] = "js/dashboard-eam.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Q2 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-gray-500 font-semibold">▲ +2.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                    <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">527 ▲ 3.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Vendors</p><p class="mm-sub">142 ▲ 6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Technicians</p><p class="mm-sub">87 ▲ 5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Facilities</p><p class="mm-sub">12 ▲ 1</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Asset Age</p><p class="mm-sub">6.8 years</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Maintenance</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Production <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Utilities <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Infrastructure <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Transport <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Facilities <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Work orders by priority</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Critical</p><p class="text-sm font-bold text-red-600">312</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">High</p><p class="text-sm font-bold text-amber-600">486</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Medium</p><p class="text-sm font-bold text-gray-900">342</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+142</span><p class="text-gray-400">PM</p></div>
+                        <div><span class="font-bold text-green-600">+86</span><p class="text-gray-400">CM</p></div>
+                        <div><span class="font-bold text-green-600">+312</span><p class="text-gray-400">Inspection</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly revenue recognition</td><td class="chip chip-blue">High</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Depreciation - June</td><td class="chip chip-blue">Medium</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Payroll accrual</td><td class="chip chip-blue">Low</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Tax provision - PPh 21</td><td class="chip chip-amber">Critical</td><td><span class="chip chip-amber">In Progress</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📋 $24,500  Vendor: TechDistrib  Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🧾 $86,200  Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">🔧 $42,800  Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">· $38,400  Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PM Compliance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Schedule</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89% / 85%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Priority</p>
+                                        <span class="text-[11px] font-semibold">92% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Routine</p>
+                                        <span class="text-[11px] font-semibold text-green-600">95% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Emergency</p>
+                                        <span class="text-[11px] font-semibold text-green-600">78% / 75%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2%</p><span class="text-[10px] text-gray-400">124 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8%</p><span class="text-[10px] text-gray-400">112 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1%</p><span class="text-[10px] text-gray-400">98 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7%</p><span class="text-[10px] text-gray-400">87 orders</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Weekly PM</p><p class="text-[10px] text-gray-400">Inspection route A</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Biweekly PM</p><p class="text-[10px] text-gray-400">Equipment calibration</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Monthly PM</p><p class="text-[10px] text-gray-400">HVAC service</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Quarterly</p><p class="text-[10px] text-gray-400">Generator test</p></div>
+                            <div class="text-right"><span class="chip chip-red">Jul 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">AS-0882</td><td>Production Line A</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0885</td><td>Warehouse B</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0888</td><td>Office Building</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0890</td><td>Fleet Garage</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0875</td><td>Cooling Tower</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0901</td><td>Boiler Room</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0902</td><td>HVAC System</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0903</td><td>Generator Room</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0904</td><td>Pump Station</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0905</td><td>Compressor</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0906</td><td>Conveyor Belt</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0907</td><td>Security System</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0908</td><td>Fire Alarm</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0909</td><td>Elevator</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0910</td><td>Server Room</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0911</td><td>Solar Panels</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0912</td><td>Water Treatment</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0913</td><td>Lab Equipment</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0914</td><td>Packaging Line</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0915</td><td>Cooling System</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0916</td><td>Ventilation</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0917</td><td>Lighting System</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0918</td><td>Drainage System</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0919</td><td>CCTV Network</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0920</td><td>Access Control</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0921</td><td>Chiller Plant</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0922</td><td>Air Handling</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0923</td><td>Heat Exchanger</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0924</td><td>Motor Control</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0925</td><td>Transformer</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0926</td><td>Switchgear</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0927</td><td>UPS System</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0928</td><td>Battery Bank</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0929</td><td>Sprinkler System</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0930</td><td>Smoke Detector</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0931</td><td>Escalator</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0932</td><td>Dock Leveler</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0933</td><td>Scaffolding</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0934</td><td>Crane System</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0935</td><td>Forklift Fleet</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0936</td><td>Concrete Mixer</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0937</td><td>Welding Station</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0938</td><td>Lathe Machine</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0939</td><td>CNC Machine</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0940</td><td>Press Machine</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0941</td><td>Assembly Line</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0942</td><td>Packaging Robot</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0943</td><td>Quality Scanner</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0944</td><td>Label Printer</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-eam3.cshtml b/Pages/Dashboard/dashboard-eam3.cshtml
new file mode 100644
index 0000000..88c5fd4
--- /dev/null
+++ b/Pages/Dashboard/dashboard-eam3.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-eam3"
+@{
+    ViewData["Title"] = "Dashboard EAM 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-eam.js"] = "js/dashboard-eam.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Q2 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-gray-500 font-semibold">▲ +2.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                    <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">527 ▲ 3.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Vendors</p><p class="mm-sub">142 ▲ 6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Technicians</p><p class="mm-sub">87 ▲ 5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Facilities</p><p class="mm-sub">12 ▲ 1</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Asset Age</p><p class="mm-sub">6.8 years</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Maintenance</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Production <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Utilities <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Infrastructure <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Transport <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Facilities <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Work orders by priority</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Critical</p><p class="text-sm font-bold text-red-600">312</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">High</p><p class="text-sm font-bold text-amber-600">486</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Medium</p><p class="text-sm font-bold text-gray-900">342</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Low</p><p class="text-sm font-bold text-indigo-700">144</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+142</span><p class="text-gray-400">PM</p></div>
+                        <div><span class="font-bold text-green-600">+86</span><p class="text-gray-400">CM</p></div>
+                        <div><span class="font-bold text-green-600">+312</span><p class="text-gray-400">Inspection</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly revenue recognition</td><td class="chip chip-blue">High</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Depreciation - June</td><td class="chip chip-blue">Medium</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Payroll accrual</td><td class="chip chip-blue">Low</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Tax provision - PPh 21</td><td class="chip chip-amber">Critical</td><td><span class="chip chip-amber">In Progress</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📋 $24,500  Vendor: TechDistrib  Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🧾 $86,200  Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">🔧 $42,800  Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">· $38,400  Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PM Compliance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Schedule</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89% / 85%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Priority</p>
+                                        <span class="text-[11px] font-semibold">92% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Routine</p>
+                                        <span class="text-[11px] font-semibold text-green-600">95% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Emergency</p>
+                                        <span class="text-[11px] font-semibold text-green-600">78% / 75%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target PM: <b class="text-green-600">92%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2%</p><span class="text-[10px] text-gray-400">124 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8%</p><span class="text-[10px] text-gray-400">112 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">92.1%</p><span class="text-[10px] text-gray-400">98 orders</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7%</p><span class="text-[10px] text-gray-400">87 orders</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Weekly PM</p><p class="text-[10px] text-gray-400">Inspection route A</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Biweekly PM</p><p class="text-[10px] text-gray-400">Equipment calibration</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Monthly PM</p><p class="text-[10px] text-gray-400">HVAC service</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Quarterly</p><p class="text-[10px] text-gray-400">Generator test</p></div>
+                            <div class="text-right"><span class="chip chip-red">Jul 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">AS-0882</td><td>Production Line A</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0885</td><td>Warehouse B</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0888</td><td>Office Building</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0890</td><td>Fleet Garage</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0875</td><td>Cooling Tower</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0901</td><td>Boiler Room</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0902</td><td>HVAC System</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0903</td><td>Generator Room</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0904</td><td>Pump Station</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0905</td><td>Compressor</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0906</td><td>Conveyor Belt</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0907</td><td>Security System</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0908</td><td>Fire Alarm</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0909</td><td>Elevator</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0910</td><td>Server Room</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0911</td><td>Solar Panels</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0912</td><td>Water Treatment</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0913</td><td>Lab Equipment</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0914</td><td>Packaging Line</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0915</td><td>Cooling System</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0916</td><td>Ventilation</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0917</td><td>Lighting System</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0918</td><td>Drainage System</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0919</td><td>CCTV Network</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0920</td><td>Access Control</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0921</td><td>Chiller Plant</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0922</td><td>Air Handling</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0923</td><td>Heat Exchanger</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0924</td><td>Motor Control</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0925</td><td>Transformer</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0926</td><td>Switchgear</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0927</td><td>UPS System</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0928</td><td>Battery Bank</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0929</td><td>Sprinkler System</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0930</td><td>Smoke Detector</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0931</td><td>Escalator</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0932</td><td>Dock Leveler</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0933</td><td>Scaffolding</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0934</td><td>Crane System</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0935</td><td>Forklift Fleet</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0936</td><td>Concrete Mixer</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0937</td><td>Welding Station</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0938</td><td>Lathe Machine</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0939</td><td>CNC Machine</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0940</td><td>Press Machine</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0941</td><td>Assembly Line</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0942</td><td>Packaging Robot</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0943</td><td>Quality Scanner</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">AS-0944</td><td>Label Printer</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-eam4.cshtml b/Pages/Dashboard/dashboard-eam4.cshtml
new file mode 100644
index 0000000..5b7612f
--- /dev/null
+++ b/Pages/Dashboard/dashboard-eam4.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-eam4"
+@{
+    ViewData["Title"] = "Dashboard EAM 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-eam.js"] = "js/dashboard-eam.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                    <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">527 ▲ 3.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Vendors</p><p class="mm-sub">142 ▲ 6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Technicians</p><p class="mm-sub">87 ▲ 5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Facilities</p><p class="mm-sub">12 ▲ 1</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Asset Age</p><p class="mm-sub">6.8 years</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Maintenance</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Production <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Utilities <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Infrastructure <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Transport <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Facilities <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Work orders by priority</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Critical</p><p class="text-sm font-bold text-green-700">312</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">High</p><p class="text-sm font-bold text-amber-600">486</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Medium</p><p class="text-sm font-bold text-red-600">342</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Low</p><p class="text-sm font-bold text-indigo-700">144</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+142</span><p class="text-gray-400">PM</p></div>
+                        <div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
+                        <div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📋 $24,500  Vendor: TechDistrib  Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🧾 $86,200  Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">🔧 $42,800  Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">· $38,400  Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PM Compliance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Schedule</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Priority</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Routine</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Emergency</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target PM: <b class="text-green-600">92%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% 124</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8% 112</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">92.1% 98</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% 87</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Weekly PM</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Biweekly PM</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Monthly PM</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Quarterly</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-eam5.cshtml b/Pages/Dashboard/dashboard-eam5.cshtml
new file mode 100644
index 0000000..92db4e8
--- /dev/null
+++ b/Pages/Dashboard/dashboard-eam5.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-eam5"
+@{
+    ViewData["Title"] = "Dashboard EAM 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-eam.js"] = "js/dashboard-eam.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                    <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">527 ▲ 3.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Vendors</p><p class="mm-sub">142 ▲ 6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Technicians</p><p class="mm-sub">87 ▲ 5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Facilities</p><p class="mm-sub">12 ▲ 1</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Asset Age</p><p class="mm-sub">6.8 years</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div class="lg:col-span-2 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Maintenance</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Production <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Utilities <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Infrastructure <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Transport <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Facilities <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Asset Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age 6.8yrs</span><span class="font-semibold text-gray-900"></span><span>Health 87.3%</span><span class="font-semibold text-gray-900"></span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Work orders by priority</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Critical</p><p class="text-sm font-bold text-green-700">312</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">High</p><p class="text-sm font-bold text-amber-600">486</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Medium</p><p class="text-sm font-bold text-red-600">342</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+142</span><p class="text-gray-400">PM</p></div>
+                        <div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
+                        <div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📋 $24,500  Vendor: TechDistrib  Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🧾 $86,200  Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">🔧 $42,800  Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">· $38,400  Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PM Compliance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Schedule</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Priority</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Routine</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Emergency</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% 124</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8% 112</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1% 98</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% 87</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Weekly PM</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Biweekly PM</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Monthly PM</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Quarterly</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
+                                    <tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-fms1.cshtml b/Pages/Dashboard/dashboard-fms1.cshtml
new file mode 100644
index 0000000..2dc867b
--- /dev/null
+++ b/Pages/Dashboard/dashboard-fms1.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-fms1"
+@{
+    ViewData["Title"] = "Dashboard FMS 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-fms.js"] = "js/dashboard-fms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 anim-fade anim-delay-1">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Expenses</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Payroll <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Operations <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Marketing <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> R&D <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$12.4M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Financial Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">AR Turnover</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">342 ▼ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
+                    <p class="text-xs text-gray-400 mb-3">Receivables & payables aging</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Cash Flow</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+$3.2M</span><p class="text-gray-400">Operating</p></div>
+                        <div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
+                        <div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Revenue</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">COGS</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">OpEx</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Net Income</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-fms2.cshtml b/Pages/Dashboard/dashboard-fms2.cshtml
new file mode 100644
index 0000000..559f0ad
--- /dev/null
+++ b/Pages/Dashboard/dashboard-fms2.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-fms2"
+@{
+    ViewData["Title"] = "Dashboard FMS 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-fms.js"] = "js/dashboard-fms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 anim-fade anim-delay-1">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Expenses</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Payroll <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Operations <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Marketing <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> R&D <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$12.4M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Financial Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">AR Turnover</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">342 ▼ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
+                    <p class="text-xs text-gray-400 mb-3">Receivables & payables aging</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Cash Flow</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+$3.2M</span><p class="text-gray-400">Operating</p></div>
+                        <div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
+                        <div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Revenue</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">COGS</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">OpEx</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Net Income</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-fms3.cshtml b/Pages/Dashboard/dashboard-fms3.cshtml
new file mode 100644
index 0000000..bdeebd7
--- /dev/null
+++ b/Pages/Dashboard/dashboard-fms3.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-fms3"
+@{
+    ViewData["Title"] = "Dashboard FMS 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-fms.js"] = "js/dashboard-fms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 anim-fade anim-delay-1">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Expenses</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Payroll <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Operations <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Marketing <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> R&D <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$12.4M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Financial Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">AR Turnover</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">342 ▼ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Equity</p><p class="text-sm font-bold text-indigo-700">$10.2M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
+                    <p class="text-xs text-gray-400 mb-3">Receivables & payables aging</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AP Outstanding</p><p class="text-sm font-bold text-indigo-700">$1.8M</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Cash Flow</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+$3.2M</span><p class="text-gray-400">Operating</p></div>
+                        <div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
+                        <div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Revenue</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">COGS</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">OpEx</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Net Income</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$3.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Payables →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-fms4.cshtml b/Pages/Dashboard/dashboard-fms4.cshtml
new file mode 100644
index 0000000..9a3c846
--- /dev/null
+++ b/Pages/Dashboard/dashboard-fms4.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-fms4"
+@{
+    ViewData["Title"] = "Dashboard FMS 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-fms.js"] = "js/dashboard-fms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 anim-fade anim-delay-1">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Expenses</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Payroll <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Operations <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Marketing <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> R&D <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$12.4M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Financial Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">AR Turnover</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">342 ▼ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Equity</p><p class="text-sm font-bold text-indigo-700">$10.2M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
+                    <p class="text-xs text-gray-400 mb-3">Receivables & payables aging</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AP Outstanding</p><p class="text-sm font-bold text-indigo-700">$1.8M</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Cash Flow</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+$3.2M</span><p class="text-gray-400">Operating</p></div>
+                        <div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
+                        <div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Revenue</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">COGS</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">OpEx</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Net Income</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$3.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Payables →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-fms5.cshtml b/Pages/Dashboard/dashboard-fms5.cshtml
new file mode 100644
index 0000000..0dc37ed
--- /dev/null
+++ b/Pages/Dashboard/dashboard-fms5.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-fms5"
+@{
+    ViewData["Title"] = "Dashboard FMS 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-fms.js"] = "js/dashboard-fms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 anim-fade anim-delay-1">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Expenses</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Payroll <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Operations <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Marketing <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> R&D <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$12.4M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Financial Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">AR Turnover</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">342 ▼ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
+                    <p class="text-xs text-gray-400 mb-3">Receivables & payables aging</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Cash Flow</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+$3.2M</span><p class="text-gray-400">Operating</p></div>
+                        <div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
+                        <div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Revenue</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">COGS</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">OpEx</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Net Income</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-hrm1.cshtml b/Pages/Dashboard/dashboard-hrm1.cshtml
new file mode 100644
index 0000000..04c6ce8
--- /dev/null
+++ b/Pages/Dashboard/dashboard-hrm1.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-hrm1"
+@{
+    ViewData["Title"] = "Dashboard HRM 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-hrm.js"] = "js/dashboard-hrm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-red-500 font-semibold">▲ +18%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-green-600 font-semibold">▼ -1.2pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-blue-700">672</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-blue-700">0.72</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
+                        <div><span class="font-bold text-red-600">+68</span><p class="text-gray-400">On Leave</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Probation</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Alice Chen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">8</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Bob Martinez</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">6</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Carol Smith</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">10</td><td><span class="chip chip-green">Rising Star</span></td></tr>
+                                <tr><td class="text-xs">David Lee</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">7</td><td><span class="chip chip-amber">Probation</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Attendance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Days Lost</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On Leave</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Sick Days</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
+                    <p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-blue-700">24</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
+                    <p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">$3,850</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">8.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">$1.2M</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">Active job openings</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Name</th><th>Event</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-red-500">3 birthdays</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-hrm2.cshtml b/Pages/Dashboard/dashboard-hrm2.cshtml
new file mode 100644
index 0000000..9abddf2
--- /dev/null
+++ b/Pages/Dashboard/dashboard-hrm2.cshtml
@@ -0,0 +1,442 @@
+@page "/dashboard-hrm2"
+@{
+    ViewData["Title"] = "Dashboard HRM 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-hrm.js"] = "js/dashboard-hrm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-red-500 font-semibold">▲ +18%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-red-500 font-semibold">▼ -1.2pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-blue-700">672</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-blue-700">0.72</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
+                        <div><span class="font-bold text-red-600">+68</span><p class="text-gray-400">On Leave</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Probation</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Eve Davis</td><td class="font-mono text-xs">Operations</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">9</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Frank Wilson</td><td class="font-mono text-xs">Finance</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">5</td><td><span class="chip chip-green">Rising Star</span></td></tr>
+                                <tr><td class="text-xs">Grace Kim</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">11</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Henry Brown</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.5</td><td class="font-mono text-xs">4</td><td><span class="chip chip-amber">Probation</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Attendance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">1,112 / 1,247</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:89%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Days Lost</p>
+                                        <span class="text-[11px] font-semibold">42 / 124</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:34%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On Leave</p>
+                                        <span class="text-[11px] font-semibold text-green-600">68 / 1,247</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:5%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Sick Days</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.2 / 8.0</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:52%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
+                    <p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-blue-700">24</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
+                    <p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">$3,850</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">8.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">$2.4M</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Active job openings</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Name</th><th>Event</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-red-500">3 birthdays</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-hrm3.cshtml b/Pages/Dashboard/dashboard-hrm3.cshtml
new file mode 100644
index 0000000..bacee55
--- /dev/null
+++ b/Pages/Dashboard/dashboard-hrm3.cshtml
@@ -0,0 +1,403 @@
+@page "/dashboard-hrm3"
+@{
+    ViewData["Title"] = "Dashboard HRM 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-hrm.js"] = "js/dashboard-hrm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-red-500 font-semibold">▲ +18%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-green-600 font-semibold">▼ -1.2pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-indigo-700">672</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-indigo-700">0.72</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
+                        <div><span class="font-bold text-red-600">+68</span><p class="text-gray-400">On Leave</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Probation</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Isabella Torres</td><td class="font-mono text-xs">HR & Admin</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">7</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Jack Nguyen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">12</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Kelly Parker</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">6</td><td><span class="chip chip-green">Rising Star</span></td></tr>
+                                <tr><td class="text-xs">Liam O'Brien</td><td class="font-mono text-xs">Operations</td><td class="font-mono text-xs">4.5</td><td class="font-mono text-xs">9</td><td><span class="chip chip-amber">Probation</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Attendance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Days Lost</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On Leave</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Sick Days</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
+                    <p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-indigo-700">24</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
+                    <p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">$3,850</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">8.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">$2.8M</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">Active job openings</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Name</th><th>Event</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-red-500">3 birthdays</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-hrm4.cshtml b/Pages/Dashboard/dashboard-hrm4.cshtml
new file mode 100644
index 0000000..2d00225
--- /dev/null
+++ b/Pages/Dashboard/dashboard-hrm4.cshtml
@@ -0,0 +1,403 @@
+@page "/dashboard-hrm4"
+@{
+    ViewData["Title"] = "Dashboard HRM 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-hrm.js"] = "js/dashboard-hrm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-red-500 font-semibold">▲ +18%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-green-600 font-semibold">▼ -1.2pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-indigo-700">672</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-indigo-700">0.72</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
+                        <div><span class="font-bold text-red-600">+68</span><p class="text-gray-400">On Leave</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Probation</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Maria Garcia</td><td class="font-mono text-xs">Finance</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">5</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Nathan Reed</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">8</td><td><span class="chip chip-green">Rising Star</span></td></tr>
+                                <tr><td class="text-xs">Olivia Wang</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">10</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
+                                <tr><td class="text-xs">Peter Johnson</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.4</td><td class="font-mono text-xs">6</td><td><span class="chip chip-amber">Probation</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Attendance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Days Lost</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On Leave</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Sick Days</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
+                    <p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-indigo-700">24</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
+                    <p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">$3,850</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">8.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">$2.8M</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">Active job openings</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Name</th><th>Event</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-red-500">3 birthdays</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-hrm5.cshtml b/Pages/Dashboard/dashboard-hrm5.cshtml
new file mode 100644
index 0000000..3581c93
--- /dev/null
+++ b/Pages/Dashboard/dashboard-hrm5.cshtml
@@ -0,0 +1,355 @@
+@page "/dashboard-hrm5"
+@{
+    ViewData["Title"] = "Dashboard HRM 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-hrm.js"] = "js/dashboard-hrm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+            <div class="lg:col-span-5 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div class="lg:col-span-2 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +18%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-red-500 font-semibold">▼ -1.2pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-blue-700">672</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-blue-700">0.72</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
+                        <div><span class="font-bold text-green-600">+68</span><p class="text-gray-400">On Leave</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Probation</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Alice Chen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">8</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Bob Martinez</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">6</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Carol Smith</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">10</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">David Lee</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">7</td><td><span class="chip chip-amber">Probation</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">HR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>New Hire</b> — Onboarded John Doe</p><p class="text-xs text-gray-400 mt-0.5">👤 $85,000 · Dept: Engineering · Level: Senior</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Active</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">HR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Leave Approved</b> — Employee: Jane Smith</p><p class="text-xs text-gray-400 mt-0.5">📅 5 days · Annual leave starting Jul 10</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Approved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">HR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Training Completed</b> — Leadership Program</p><p class="text-xs text-gray-400 mt-0.5">📋 24 participants · 92% completion rate</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Completed</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">HR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payroll Processed</b> — June payroll</p><p class="text-xs text-gray-400 mt-0.5">💰 $4.8M · 1,247 employees processed</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Processing</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Attendance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">97.8% / 95%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Days Lost</p>
+                                        <span class="text-[11px] font-semibold">342 / 300</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:114%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On Leave</p>
+                                        <span class="text-[11px] font-semibold text-green-600">68 / 75</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:91%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Sick Days</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.2 / 5.0</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:84%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
+                    <p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-blue-700">24</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
+                    <p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly average per employee</p></div>
+                            <div class="text-right"><span class="chip chip-blue">$3,850</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">% of total compensation</p></div>
+                            <div class="text-right"><span class="chip chip-purple">8.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Year-to-date bonus paid</p></div>
+                            <div class="text-right"><span class="chip chip-orange">$1.2M</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Error rate tracking</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Active job openings</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Senior Engineer</td><td>Engineering</td><td class="font-mono text-xs text-green-600">24</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
+                                    <tr><td class="font-mono text-xs">Product Manager</td><td>Product</td><td class="font-mono text-xs text-green-600">18</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
+                                    <tr><td class="font-mono text-xs">Data Analyst</td><td>Data Science</td><td class="font-mono text-xs text-green-600">31</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
+                                    <tr><td class="font-mono text-xs">UX Designer</td><td>Design</td><td class="font-mono text-xs text-green-600">15</td><td class="font-mono text-xs"><span class="chip chip-amber">Reviewing</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Name</th><th>Event</th><th>Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Alice Johnson</td><td>Birthday</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Upcoming</span></td></tr>
+                                    <tr><td class="font-mono text-xs">Bob Williams</td><td>Work Anniversary</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Upcoming</span></td></tr>
+                                    <tr><td class="font-mono text-xs">Carol Brown</td><td>Birthday</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">David Jones</td><td>Birthday</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">Eve Davis</td><td>Work Anniversary</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Today</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-green-500">3 birthdays</b></span></div>
+                </div>
+            </div>
+        </div>
diff --git a/Pages/Dashboard/dashboard-itsm1.cshtml b/Pages/Dashboard/dashboard-itsm1.cshtml
new file mode 100644
index 0000000..5be419e
--- /dev/null
+++ b/Pages/Dashboard/dashboard-itsm1.cshtml
@@ -0,0 +1,432 @@
+@page "/dashboard-itsm1"
+@{
+    ViewData["Title"] = "Dashboard Itsm 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-itsm.js"] = "js/dashboard-itsm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">Active & known problems</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Problems</p><p class="text-sm font-bold text-gray-900">12</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Known Errors</p><p class="text-sm font-bold text-gray-900">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                    </div>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+8</span><p class="text-gray-400">Critical</p></div>
+                        <div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
+                        <div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
+                    <h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">This month's changes</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">ITSM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Open Incidents</p><p class="mm-sub">47 ↓ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Problems</p><p class="mm-sub">12 ↓ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Pending Changes</p><p class="mm-sub">8 0</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Backlog</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">FRT</p><p class="mm-sub">12 ↓ 3min</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">3 ↑ 48</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Critical Incidents</p><p class="mm-sub">8 ↓ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Releases</p><p class="mm-sub">42 ↓ 8</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Open Tickets</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">CI Items</p><p class="mm-sub">3,247 total</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Resolved</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Incident Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Hardware <span class="font-semibold ml-auto">28%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Other <span class="font-semibold ml-auto">10%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
+                                <tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
+                                <tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
+                                <tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">SLA Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P1 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P2 Resolution</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P3 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Request Fulfillment</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">CMDB Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Configuration management</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Unmapped</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Release Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-itsm2.cshtml b/Pages/Dashboard/dashboard-itsm2.cshtml
new file mode 100644
index 0000000..28d11c2
--- /dev/null
+++ b/Pages/Dashboard/dashboard-itsm2.cshtml
@@ -0,0 +1,432 @@
+@page "/dashboard-itsm2"
+@{
+    ViewData["Title"] = "Dashboard Itsm 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-itsm.js"] = "js/dashboard-itsm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management - Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">Active & known problems</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Problems</p><p class="text-sm font-bold text-gray-900">12</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Known Errors</p><p class="text-sm font-bold text-gray-900">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                    </div>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+8</span><p class="text-gray-400">Critical</p></div>
+                        <div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
+                        <div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
+                    <h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">This month's changes</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">ITSM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Open Incidents</p><p class="mm-sub">47 ↓ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Problems</p><p class="mm-sub">12 ↓ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Pending Changes</p><p class="mm-sub">8 0</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Backlog</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">FRT</p><p class="mm-sub">12 ↓ 3min</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">3 ↑ 48</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Critical Incidents</p><p class="mm-sub">8 ↓ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Releases</p><p class="mm-sub">42 ↓ 8</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Open Tickets</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">CI Items</p><p class="mm-sub">3,247 total</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Resolved</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Incident Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Hardware <span class="font-semibold ml-auto">28%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Other <span class="font-semibold ml-auto">10%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
+                                <tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
+                                <tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
+                                <tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">SLA Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P1 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P2 Resolution</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P3 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Request Fulfillment</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">CMDB Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Configuration management</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Unmapped</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Release Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-itsm3.cshtml b/Pages/Dashboard/dashboard-itsm3.cshtml
new file mode 100644
index 0000000..5c6537f
--- /dev/null
+++ b/Pages/Dashboard/dashboard-itsm3.cshtml
@@ -0,0 +1,432 @@
+@page "/dashboard-itsm3"
+@{
+    ViewData["Title"] = "Dashboard Itsm 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-itsm.js"] = "js/dashboard-itsm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">Active & known problems</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Problems</p><p class="text-sm font-bold text-gray-900">12</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Known Errors</p><p class="text-sm font-bold text-gray-900">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                    </div>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+8</span><p class="text-gray-400">Critical</p></div>
+                        <div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
+                        <div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
+                    <h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">This month's changes</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">ITSM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Open Incidents</p><p class="mm-sub">47 ↓ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Problems</p><p class="mm-sub">12 ↓ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Pending Changes</p><p class="mm-sub">8 0</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Backlog</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">FRT</p><p class="mm-sub">12 ↓ 3min</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">3 ↑ 48</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Critical Incidents</p><p class="mm-sub">8 ↓ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Releases</p><p class="mm-sub">42 ↓ 8</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Open Tickets</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">CI Items</p><p class="mm-sub">3,247 total</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Resolved</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Incident Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Hardware <span class="font-semibold ml-auto">28%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Other <span class="font-semibold ml-auto">10%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
+                                <tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
+                                <tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
+                                <tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">SLA Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P1 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P2 Resolution</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P3 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Request Fulfillment</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">CMDB Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Configuration management</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Unmapped</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Release Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-itsm4.cshtml b/Pages/Dashboard/dashboard-itsm4.cshtml
new file mode 100644
index 0000000..3e8f140
--- /dev/null
+++ b/Pages/Dashboard/dashboard-itsm4.cshtml
@@ -0,0 +1,432 @@
+@page "/dashboard-itsm4"
+@{
+    ViewData["Title"] = "Dashboard Itsm 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-itsm.js"] = "js/dashboard-itsm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">Active & known problems</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Problems</p><p class="text-sm font-bold text-gray-900">12</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Known Errors</p><p class="text-sm font-bold text-gray-900">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                    </div>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+8</span><p class="text-gray-400">Critical</p></div>
+                        <div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
+                        <div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
+                    <h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">This month's changes</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">ITSM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Open Incidents</p><p class="mm-sub">47 ↓ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Problems</p><p class="mm-sub">12 ↓ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Pending Changes</p><p class="mm-sub">8 0</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Backlog</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">FRT</p><p class="mm-sub">12 ↓ 3min</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">3 ↑ 48</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Critical Incidents</p><p class="mm-sub">8 ↓ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Releases</p><p class="mm-sub">42 ↓ 8</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Open Tickets</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">CI Items</p><p class="mm-sub">3,247 total</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Resolved</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Incident Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Hardware <span class="font-semibold ml-auto">28%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Other <span class="font-semibold ml-auto">10%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
+                                <tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
+                                <tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
+                                <tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">SLA Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P1 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P2 Resolution</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P3 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Request Fulfillment</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">CMDB Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Configuration management</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Unmapped</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Release Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-itsm5.cshtml b/Pages/Dashboard/dashboard-itsm5.cshtml
new file mode 100644
index 0000000..e555dd2
--- /dev/null
+++ b/Pages/Dashboard/dashboard-itsm5.cshtml
@@ -0,0 +1,432 @@
+@page "/dashboard-itsm5"
+@{
+    ViewData["Title"] = "Dashboard Itsm 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-itsm.js"] = "js/dashboard-itsm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">Active & known problems</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Problems</p><p class="text-sm font-bold text-gray-900">12</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Known Errors</p><p class="text-sm font-bold text-gray-900">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                        <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                        <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></div>
+                        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                    </div>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+8</span><p class="text-gray-400">Critical</p></div>
+                        <div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
+                        <div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
+                    <h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
+                    <p class="text-xs text-gray-400 mb-3">This month's changes</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">ITSM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Open Incidents</p><p class="mm-sub">47 ↓ 12</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Problems</p><p class="mm-sub">12 ↓ 3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Pending Changes</p><p class="mm-sub">8 0</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Backlog</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">FRT</p><p class="mm-sub">12 ↓ 3min</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Total Assets</p><p class="mm-sub">3 ↑ 48</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Critical Incidents</p><p class="mm-sub">8 ↓ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Releases</p><p class="mm-sub">42 ↓ 8</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Open Tickets</p><p class="mm-sub">128 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">CI Items</p><p class="mm-sub">3,247 total</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Resolved</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Incident Category</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Hardware <span class="font-semibold ml-auto">28%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Other <span class="font-semibold ml-auto">10%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Top Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
+                                <tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
+                                <tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
+                                <tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">SLA Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P1 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P2 Resolution</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">P3 Resolution</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Request Fulfillment</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">CMDB Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">Configuration management</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Unmapped</p><p class="text-sm font-bold text-blue-700">18</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Release Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Open Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
+                                    <tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Invoice</th><th>Vendor</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-pos1.cshtml b/Pages/Dashboard/dashboard-pos1.cshtml
new file mode 100644
index 0000000..b4992db
--- /dev/null
+++ b/Pages/Dashboard/dashboard-pos1.cshtml
@@ -0,0 +1,441 @@
+@page "/dashboard-pos1"
+@{
+    ViewData["Title"] = "Dashboard POS 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">↑ 15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">↑ 5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1 ↑ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ↓ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2 ↑ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ↓ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3 ↑ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ↓ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 ↓ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ↓ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Won</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">LD</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">New</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Updated</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">EM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Sent</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads → MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">68% / 65%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL → SQL</p>
+                                        <span class="text-[11px] font-semibold">42% / 40%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL → Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">34% / 32%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
+                            <div class="text-right"><span class="chip chip-blue">-12%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-purple">↑ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
+                            <div class="text-right"><span class="chip chip-orange">↑ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-red">↑ 8%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
+                                    <tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
+                                    <tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
+                                    <tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
+                                    <tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
+                                    <tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
+                                    <tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
+                                    <tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
+                                    <tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
+                                    <tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
+                                    <tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
+                                    <tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
+                                    <tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CT-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-pos2.cshtml b/Pages/Dashboard/dashboard-pos2.cshtml
new file mode 100644
index 0000000..82bd4dc
--- /dev/null
+++ b/Pages/Dashboard/dashboard-pos2.cshtml
@@ -0,0 +1,443 @@
+@page "/dashboard-pos2"
+@{
+    ViewData["Title"] = "Dashboard POS 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">↑ 9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">↑ 15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">↑ 5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1 ↑ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ↓ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2 ↑ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ↓ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3 ↑ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ↓ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 ↓ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ↓ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads → MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL → SQL</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL → Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-pos3.cshtml b/Pages/Dashboard/dashboard-pos3.cshtml
new file mode 100644
index 0000000..d116d2e
--- /dev/null
+++ b/Pages/Dashboard/dashboard-pos3.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-pos3"
+@{
+    ViewData["Title"] = "Dashboard POS 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">↑ 15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">↑ 5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1 ↑ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ↓ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2 ↑ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ↓ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3 ↑ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ↓ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 ↓ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ↓ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads → MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL → SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL → Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-pos4.cshtml b/Pages/Dashboard/dashboard-pos4.cshtml
new file mode 100644
index 0000000..5978bdb
--- /dev/null
+++ b/Pages/Dashboard/dashboard-pos4.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-pos4"
+@{
+    ViewData["Title"] = "Dashboard POS 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">↑ 15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">↑ 5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1 ↑ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ↓ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2 ↑ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ↓ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3 ↑ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ↓ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 ↓ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ↓ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads → MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL → SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL → Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-pos5.cshtml b/Pages/Dashboard/dashboard-pos5.cshtml
new file mode 100644
index 0000000..2c077ce
--- /dev/null
+++ b/Pages/Dashboard/dashboard-pos5.cshtml
@@ -0,0 +1,372 @@
+@page "/dashboard-pos5"
+@{
+    ViewData["Title"] = "Dashboard POS 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">↑ 15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">↑ 5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">CRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1 ↑ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ↓ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2 ↑ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ↓ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3 ↑ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ↓ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 ↓ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ↓ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div class="lg:col-span-2 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Sales Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS deal</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Mid-market upgrade</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Proposal</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Startup onboarding</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>Contract renewal Q3</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Closing</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Closed</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Customer: TechDistrib · Enterprise</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Won</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">LD</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Assigned</b> — Lead: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Source: Website</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">New</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">OP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stage Updated</b> — Deal DL-2026-0741</p><p class="text-xs text-gray-400 mt-0.5">ⓘ Moved to Negotiation · $42,800</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Updated</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">EM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q3 Launch</p><p class="text-xs text-gray-400 mt-0.5">ⓘ 2,450 recipients · Open rate: 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Sent</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads → MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,225</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:50%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL → SQL</p>
+                                        <span class="text-[11px] font-semibold">1,225 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:52%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL → Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">640 / 89</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:47%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Support backlog</p></div>
+                            <div class="text-right"><span class="chip chip-blue">142</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">2.4hrs</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">4.2/5</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">4.2hrs</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">WEB-01</td><td>Website Organic</td><td class="font-mono text-xs text-green-600">1,200</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">REF-01</td><td>Referral Program</td><td class="font-mono text-xs text-green-600">860</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">SOC-01</td><td>Social Media</td><td class="font-mono text-xs text-green-600">740</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">EML-01</td><td>Email Campaigns</td><td class="font-mono text-xs text-green-600">490</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">PRT-01</td><td>Partner Network</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">EVT-01</td><td>Events & Webinars</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">280</td></tr>
+                                    <tr><td class="font-mono text-xs">DIR-01</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">195</td></tr>
+                                    <tr><td class="font-mono text-xs">ADS-01</td><td>Paid Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">180</td></tr>
+                                    <tr><td class="font-mono text-xs">CON-01</td><td>Content Marketing</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">145</td></tr>
+                                    <tr><td class="font-mono text-xs">WOM-01</td><td>Word of Mouth</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">120</td></tr>
+                                    <tr><td class="font-mono text-xs">BLG-01</td><td>Blog & SEO</td><td class="font-mono text-xs text-green-600">320</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">MKT-01</td><td>Marketplace</td><td class="font-mono text-xs text-green-600">280</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">MOB-01</td><td>Mobile App</td><td class="font-mono text-xs text-green-600">210</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">API-01</td><td>API Integration</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">160</td></tr>
+                                    <tr><td class="font-mono text-xs">RES-01</td><td>Research Portal</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CT-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-rms1.cshtml b/Pages/Dashboard/dashboard-rms1.cshtml
new file mode 100644
index 0000000..f9d5e1b
--- /dev/null
+++ b/Pages/Dashboard/dashboard-rms1.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-rms1"
+@{
+    ViewData["Title"] = "Dashboard RMS 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-rms.js"] = "js/dashboard-rms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Shift Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">RMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2 ↑ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1 ↑ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ↓ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-rms2.cshtml b/Pages/Dashboard/dashboard-rms2.cshtml
new file mode 100644
index 0000000..e6b1100
--- /dev/null
+++ b/Pages/Dashboard/dashboard-rms2.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-rms2"
+@{
+    ViewData["Title"] = "Dashboard RMS 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-rms.js"] = "js/dashboard-rms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Shift Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">RMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2 ↑ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1 ↑ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ↓ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-rms3.cshtml b/Pages/Dashboard/dashboard-rms3.cshtml
new file mode 100644
index 0000000..feb85b3
--- /dev/null
+++ b/Pages/Dashboard/dashboard-rms3.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-rms3"
+@{
+    ViewData["Title"] = "Dashboard RMS 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-rms.js"] = "js/dashboard-rms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Shift Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">RMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2 ↑ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1 ↑ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ↓ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-rms4.cshtml b/Pages/Dashboard/dashboard-rms4.cshtml
new file mode 100644
index 0000000..d535945
--- /dev/null
+++ b/Pages/Dashboard/dashboard-rms4.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-rms4"
+@{
+    ViewData["Title"] = "Dashboard RMS 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-rms.js"] = "js/dashboard-rms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Shift Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">RMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2 ↑ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1 ↑ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ↓ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-rms5.cshtml b/Pages/Dashboard/dashboard-rms5.cshtml
new file mode 100644
index 0000000..d5207f2
--- /dev/null
+++ b/Pages/Dashboard/dashboard-rms5.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-rms5"
+@{
+    ViewData["Title"] = "Dashboard RMS 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-rms.js"] = "js/dashboard-rms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Shift Distribution</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">RMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2 ↑ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1 ↑ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8 ↓ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ↓ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-scm1.cshtml b/Pages/Dashboard/dashboard-scm1.cshtml
new file mode 100644
index 0000000..ef00b07
--- /dev/null
+++ b/Pages/Dashboard/dashboard-scm1.cshtml
@@ -0,0 +1,382 @@
+@page "/dashboard-scm1"
+@{
+    ViewData["Title"] = "Dashboard SCM 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-scm.js"] = "js/dashboard-scm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">SCM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2,847 ▲ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ▲ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
+                            <div class="text-right"><span class="chip chip-purple">87%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">76%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</p></div>
+                            <div class="text-right"><span class="chip chip-red">92%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
+                                    <tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-scm2.cshtml b/Pages/Dashboard/dashboard-scm2.cshtml
new file mode 100644
index 0000000..403331f
--- /dev/null
+++ b/Pages/Dashboard/dashboard-scm2.cshtml
@@ -0,0 +1,369 @@
+@page "/dashboard-scm2"
+@{
+    ViewData["Title"] = "Dashboard SCM 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-scm.js"] = "js/dashboard-scm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Spend</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">SCM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2,847 ▲ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ▲ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-red-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw materials order</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>Logistics service</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>IT equipment</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">PO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Approved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">PR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📄 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Submitted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">RFQ</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Closed</b> — Raw Materials Q3</p><p class="text-xs text-gray-400 mt-0.5">📋 8 bids · 3 suppliers responded</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Closed</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0812</p><p class="text-xs text-gray-400 mt-0.5">🚚 52 units · Supplier: Indah Logistik</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:104%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96% / 95%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:101%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98% / 97%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:101%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">96%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">88%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">85%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Supplier audit compliance</p></div>
+                            <div class="text-right"><span class="chip chip-blue">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">ISO certification status</p></div>
+                            <div class="text-right"><span class="chip chip-purple">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">82%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Safety</p><p class="text-[10px] text-gray-400">Safety compliance score</p></div>
+                            <div class="text-right"><span class="chip chip-red">78%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">SLA achievement rate</p></div>
+                            <div class="text-right"><span class="chip chip-blue">91%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CAT-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,860,000</td><td class="font-mono text-xs">32.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-02</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,220,000</td><td class="font-mono text-xs">14.0%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-04</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$740,000</td><td class="font-mono text-xs">8.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-05</td><td>Office Supplies</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">6.0%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-06</td><td>Maintenance</td><td class="font-mono text-xs text-green-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-07</td><td>Consulting</td><td class="font-mono text-xs text-green-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-08</td><td>Marketing</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">3.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-09</td><td>Training</td><td class="font-mono text-xs text-green-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-10</td><td>Travel</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-blue-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>Siemens AG</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-scm3.cshtml b/Pages/Dashboard/dashboard-scm3.cshtml
new file mode 100644
index 0000000..601e22f
--- /dev/null
+++ b/Pages/Dashboard/dashboard-scm3.cshtml
@@ -0,0 +1,369 @@
+@page "/dashboard-scm3"
+@{
+    ViewData["Title"] = "Dashboard SCM 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-scm.js"] = "js/dashboard-scm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Spend</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">SCM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2,847 ▲ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ▲ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-indigo-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-indigo-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-red-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw materials order</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>Logistics service</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Approved</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>IT equipment</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">PO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Approved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">PR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📄 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Submitted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">RFQ</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Closed</b> — Raw Materials Q3</p><p class="text-xs text-gray-400 mt-0.5">📋 8 bids · 3 suppliers responded</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Closed</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0812</p><p class="text-xs text-gray-400 mt-0.5">🚚 52 units · Supplier: Indah Logistik</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:104%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96% / 95%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:101%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98% / 97%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:101%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92% / 90%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">96%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-indigo-700">$312K</p><p class="text-[10px] text-green-600">88%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">85%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Supplier audit compliance</p></div>
+                            <div class="text-right"><span class="chip chip-blue">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">ISO certification status</p></div>
+                            <div class="text-right"><span class="chip chip-purple">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
+                            <div class="text-right"><span class="chip chip-orange">82%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Safety</p><p class="text-[10px] text-gray-400">Safety compliance score</p></div>
+                            <div class="text-right"><span class="chip chip-red">78%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">SLA Met</p><p class="text-[10px] text-gray-400">SLA achievement rate</p></div>
+                            <div class="text-right"><span class="chip chip-blue">91%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CAT-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,860,000</td><td class="font-mono text-xs">32.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-02</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,220,000</td><td class="font-mono text-xs">14.0%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-04</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$740,000</td><td class="font-mono text-xs">8.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-05</td><td>Office Supplies</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">6.0%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-06</td><td>Maintenance</td><td class="font-mono text-xs text-green-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-07</td><td>Consulting</td><td class="font-mono text-xs text-green-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-08</td><td>Marketing</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">3.6%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-09</td><td>Training</td><td class="font-mono text-xs text-green-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
+                                    <tr><td class="font-mono text-xs">CAT-10</td><td>Travel</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">2.1%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-indigo-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>Siemens AG</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-scm4.cshtml b/Pages/Dashboard/dashboard-scm4.cshtml
new file mode 100644
index 0000000..150bf30
--- /dev/null
+++ b/Pages/Dashboard/dashboard-scm4.cshtml
@@ -0,0 +1,403 @@
+@page "/dashboard-scm4"
+@{
+    ViewData["Title"] = "Dashboard SCM 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-scm.js"] = "js/dashboard-scm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">SCM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2,847 ▲ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ▲ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-indigo-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-indigo-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">120</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics services</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">PO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Approved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">PR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: Warehouse</p><p class="text-xs text-gray-400 mt-0.5">📥 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Submitted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">DN</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0410</p><p class="text-xs text-gray-400 mt-0.5">📋 200 units received</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">RF</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Published</b> — RFQ-2026-003</p><p class="text-xs text-gray-400 mt-0.5">🧾 3 bids received</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Open</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.3%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K · 96%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K · 92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-indigo-700">$312K · 88%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K · 85%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Quarterly audit completion</p></div>
+                            <div class="text-right"><span class="chip chip-blue">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certification compliance</p></div>
+                            <div class="text-right"><span class="chip chip-purple">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental standards</p></div>
+                            <div class="text-right"><span class="chip chip-orange">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Safety</p><p class="text-[10px] text-gray-400">Workplace safety score</p></div>
+                            <div class="text-right"><span class="chip chip-red">85%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CRM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,450,000</td><td class="font-mono text-xs">28%</td></tr>
+                                    <tr><td class="font-mono text-xs">IND-02</td><td>Indirect Materials</td><td class="font-mono text-xs text-green-600">$1,920,000</td><td class="font-mono text-xs">22%</td></tr>
+                                    <tr><td class="font-mono text-xs">LOG-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,310,000</td><td class="font-mono text-xs">15%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-04</td><td>IT Services</td><td class="font-mono text-xs text-green-600">$1,050,000</td><td class="font-mono text-xs">12%</td></tr>
+                                    <tr><td class="font-mono text-xs">PROF-05</td><td>Professional Services</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">9%</td></tr>
+                                    <tr><td class="font-mono text-xs">MRO-06</td><td>MRO Supplies</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">6%</td></tr>
+                                    <tr><td class="font-mono text-xs">PKG-07</td><td>Packaging</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UTIL-08</td><td>Utilities</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO#</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-scm5.cshtml b/Pages/Dashboard/dashboard-scm5.cshtml
new file mode 100644
index 0000000..fefdb13
--- /dev/null
+++ b/Pages/Dashboard/dashboard-scm5.cshtml
@@ -0,0 +1,403 @@
+@page "/dashboard-scm5"
+@{
+    ViewData["Title"] = "Dashboard SCM 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-scm.js"] = "js/dashboard-scm.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Direct Raw <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Indirect <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Logistics <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> IT <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            <div class="lg:col-span-2 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+            <div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 lg:row-start-2 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">SCM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">PR Volume</p><p class="mm-sub">2,847 ▲ 22.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Delivery Rate</p><p class="mm-sub">96.8% ▲ 1.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Active RFQ</p><p class="mm-sub">38 ▲ 7</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
+                    <p class="text-xs text-gray-400 mb-3">Orders by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pending Approval</p><p class="text-sm font-bold text-green-700">846</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">In Progress</p><p class="text-sm font-bold text-amber-600">423</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Delivered</p><p class="text-sm font-bold text-red-600">215</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Procurement Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+423</span><p class="text-gray-400">PR Created</p></div>
+                        <div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
+                        <div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">120</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics services</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">PO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Approved</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">PR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: Warehouse</p><p class="text-xs text-gray-400 mt-0.5">📥 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Submitted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">DN</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0410</p><p class="text-xs text-gray-400 mt-0.5">📋 200 units received</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">RF</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Published</b> — RFQ-2026-003</p><p class="text-xs text-gray-400 mt-0.5">🧾 3 bids received</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Open</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Supplier Performance</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">On-Time</p>
+                                        <span class="text-[11px] font-semibold text-green-600">94.2%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Delivery</p>
+                                        <span class="text-[11px] font-semibold">96.8%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:97%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Quality</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Compliance</p>
+                                        <span class="text-[11px] font-semibold text-green-600">92.3%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:92%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K · 96%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K · 92%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K · 88%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K · 85%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Audit Pass</p><p class="text-[10px] text-gray-400">Quarterly audit completion</p></div>
+                            <div class="text-right"><span class="chip chip-blue">96%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">ISO Cert</p><p class="text-[10px] text-gray-400">Certification compliance</p></div>
+                            <div class="text-right"><span class="chip chip-purple">88%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Env Comp</p><p class="text-[10px] text-gray-400">Environmental standards</p></div>
+                            <div class="text-right"><span class="chip chip-orange">92%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Safety</p><p class="text-[10px] text-gray-400">Workplace safety score</p></div>
+                            <div class="text-right"><span class="chip chip-red">85%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CRM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,450,000</td><td class="font-mono text-xs">28%</td></tr>
+                                    <tr><td class="font-mono text-xs">IND-02</td><td>Indirect Materials</td><td class="font-mono text-xs text-green-600">$1,920,000</td><td class="font-mono text-xs">22%</td></tr>
+                                    <tr><td class="font-mono text-xs">LOG-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,310,000</td><td class="font-mono text-xs">15%</td></tr>
+                                    <tr><td class="font-mono text-xs">IT-04</td><td>IT Services</td><td class="font-mono text-xs text-green-600">$1,050,000</td><td class="font-mono text-xs">12%</td></tr>
+                                    <tr><td class="font-mono text-xs">PROF-05</td><td>Professional Services</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">9%</td></tr>
+                                    <tr><td class="font-mono text-xs">MRO-06</td><td>MRO Supplies</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">6%</td></tr>
+                                    <tr><td class="font-mono text-xs">PKG-07</td><td>Packaging</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">4%</td></tr>
+                                    <tr><td class="font-mono text-xs">UTIL-08</td><td>Utilities</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2%</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>PO#</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">PO-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">PO-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-tms1.cshtml b/Pages/Dashboard/dashboard-tms1.cshtml
new file mode 100644
index 0000000..6c72eff
--- /dev/null
+++ b/Pages/Dashboard/dashboard-tms1.cshtml
@@ -0,0 +1,441 @@
+@page "/dashboard-tms1"
+@{
+    ViewData["Title"] = "Dashboard TMS 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-tms.js"] = "js/dashboard-tms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">TMS Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">TMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Won</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">LD</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">New</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">DL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Updated</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">EM</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Sent</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">68% / 65%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">42% / 40%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">34% / 32%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
+                            <div class="text-right"><span class="chip chip-blue">-12%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-purple">▼ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
+                            <div class="text-right"><span class="chip chip-orange">▲ 0.3</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
+                            <div class="text-right"><span class="chip chip-red">▲ 8%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
+                                    <tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
+                                    <tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
+                                    <tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
+                                    <tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
+                                    <tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
+                                    <tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
+                                    <tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
+                                    <tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
+                                    <tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
+                                    <tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
+                                    <tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
+                                    <tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
+                                    <tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
+                                    <tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
+                                    <tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">CT-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-tms2.cshtml b/Pages/Dashboard/dashboard-tms2.cshtml
new file mode 100644
index 0000000..45f25f1
--- /dev/null
+++ b/Pages/Dashboard/dashboard-tms2.cshtml
@@ -0,0 +1,443 @@
+@page "/dashboard-tms2"
+@{
+    ViewData["Title"] = "Dashboard TMS 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-tms.js"] = "js/dashboard-tms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">TMS Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">TMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-tms3.cshtml b/Pages/Dashboard/dashboard-tms3.cshtml
new file mode 100644
index 0000000..342cd20
--- /dev/null
+++ b/Pages/Dashboard/dashboard-tms3.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-tms3"
+@{
+    ViewData["Title"] = "Dashboard TMS 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-tms.js"] = "js/dashboard-tms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">TMS Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">TMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-tms4.cshtml b/Pages/Dashboard/dashboard-tms4.cshtml
new file mode 100644
index 0000000..3c63fd3
--- /dev/null
+++ b/Pages/Dashboard/dashboard-tms4.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-tms4"
+@{
+    ViewData["Title"] = "Dashboard TMS 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-tms.js"] = "js/dashboard-tms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">TMS Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">TMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-tms5.cshtml b/Pages/Dashboard/dashboard-tms5.cshtml
new file mode 100644
index 0000000..53e472b
--- /dev/null
+++ b/Pages/Dashboard/dashboard-tms5.cshtml
@@ -0,0 +1,447 @@
+@page "/dashboard-tms5"
+@{
+    ViewData["Title"] = "Dashboard TMS 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-tms.js"] = "js/dashboard-tms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+                    <h3 class="font-bold text-gray-900 mb-1">TMS Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+245</span><p class="text-gray-400">Calls</p></div>
+                        <div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
+                        <div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
+                    </div>
+                </div>
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$2.46M</p><span class="kpi-delta">▲ +15.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Avg Deal Size</p><p class="kpi-value">$14.3K</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">TMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">MRR</p><p class="mm-sub">$128K ▲ 8.7%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Leads</p><p class="mm-sub">2,450 ▲ 18%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Deals</p><p class="mm-sub">640 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Contacts</p><p class="mm-sub">3,250 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">NPS Score</p><p class="mm-sub">72 ▲ 5pts</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Cycle</p><p class="mm-sub">62 days ▼ 3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Campaigns</p><p class="mm-sub">24 ▲ 4</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Enterprise</p><p class="mm-sub">35% rev share</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Target</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Lead Sources</h3>
+                    <p class="text-xs text-gray-400 mb-3">By category this period</p>
+                    <div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
+                    <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Website <span class="font-semibold ml-auto">42%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Referral <span class="font-semibold ml-auto">22%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Social <span class="font-semibold ml-auto">15%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Email <span class="font-semibold ml-auto">12%</span></div>
+                        <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
+                    <p class="text-xs text-gray-400 mb-3">Pipeline by stage</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Qualified</p><p class="text-sm font-bold text-amber-600">640</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Negotiation</p><p class="text-sm font-bold text-red-600">156</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div>
+                        <div class="flex items-center justify-between mb-4">
+                            <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 mt-2">
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
+                            <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Leads→MQL</p>
+                                        <span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:75%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">MQL→SQL</p>
+                                        <span class="text-[11px] font-semibold">640 / 1,840</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:35%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">SQL→Won</p>
+                                        <span class="text-[11px] font-semibold text-green-600">89 / 640</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:14%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall CVR</p>
+                                        <span class="text-[11px] font-semibold text-green-600">4.7%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target CVR: <b class="text-green-600">5%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
+                    <p class="text-xs text-gray-400 mb-3">This quarter ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
+                            <span class="text-xs font-semibold text-green-600">48%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
+                            <span class="text-xs font-semibold text-green-600">42%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
+                            <span class="text-xs font-semibold text-green-600">38%</span>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
+                            <span class="text-xs font-semibold text-green-600">35%</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
+                    <p class="text-xs text-gray-400 mb-3">Customer service KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
+                                    <tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
+                                    <tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
+                                    <tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
+                                    <tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
+                                    <tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
+                                    <tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
+                                    <tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
+                                    <tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-wms1.cshtml b/Pages/Dashboard/dashboard-wms1.cshtml
new file mode 100644
index 0000000..2458f30
--- /dev/null
+++ b/Pages/Dashboard/dashboard-wms1.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-wms1"
+@{
+    ViewData["Title"] = "Dashboard WMS 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["Js:dashboard-wms.js"] = "js/dashboard-wms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +2</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+    <div>
+        <div class="flex items-center justify-between mb-4">
+            <div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
+        </div>
+        <div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><canvas id="expenseChart"></canvas></div></div>
+        <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Racking <span class="font-semibold ml-auto">42%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Bulk <span class="font-semibold ml-auto">22%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Overflow <span class="font-semibold ml-auto">15%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Cold <span class="font-semibold ml-auto">12%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+        </div>
+    </div>
+</div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">WMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →’</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Items</p><p class="mm-sub">84,500 ▲ 5.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Locations</p><p class="mm-sub">42 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Open TO</p><p class="mm-sub">18 ▲ 6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">TO Completed</p><p class="mm-sub">245 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Processed</p><p class="mm-sub">186 ▲ 8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">DO Shipped</p><p class="mm-sub">158 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Stock Check</p><p class="mm-sub">100% ✓</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Time</p><p class="mm-sub">3.2hrs ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">ABC Class A</p><p class="mm-sub">3,450 items</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="lg:col-span-1 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Outgoing</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+    <div class="flex items-center justify-between mb-4">
+        <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +5.3%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +8.2%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +2</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +6</span></div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Location Used</p><p class="text-sm font-bold text-gray-900">38</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Transfer Order by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Draft</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Processing</p><p class="text-sm font-bold text-amber-600">6</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completed</p><p class="text-sm font-bold text-red-600">22</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Receiving Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">GR</p></div>
+                        <div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
+                        <div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone A</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone B</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone C</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
+                    <p class="text-xs text-gray-400 mb-3">This period ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Widget A</p><p class="text-sm font-bold text-gray-900">12,450</p><span class="text-[10px] text-green-600">+15%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320</p><span class="text-[10px] text-green-600">+12%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Part C</p><p class="text-sm font-bold text-blue-700">6,180</p><span class="text-[10px] text-green-600">+8%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Tool D</p><p class="text-sm font-bold text-gray-900">4,250</p><span class="text-[10px] text-green-600">+5%</span></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
+                    <p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pass Rate</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Damage</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Reject</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">On Hold / Return Rate</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>DO#</th><th>Customer</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-wms2.cshtml b/Pages/Dashboard/dashboard-wms2.cshtml
new file mode 100644
index 0000000..dcd2c9a
--- /dev/null
+++ b/Pages/Dashboard/dashboard-wms2.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-wms2"
+@{
+    ViewData["Title"] = "Dashboard WMS 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["Js:dashboard-wms.js"] = "js/dashboard-wms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +2</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+    <div>
+        <div class="flex items-center justify-between mb-4">
+            <div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
+        </div>
+        <div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><canvas id="expenseChart"></canvas></div></div>
+        <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Racking <span class="font-semibold ml-auto">42%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Bulk <span class="font-semibold ml-auto">22%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Overflow <span class="font-semibold ml-auto">15%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Cold <span class="font-semibold ml-auto">12%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+        </div>
+    </div>
+</div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">WMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →’</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Items</p><p class="mm-sub">84,500 ▲ 5.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Locations</p><p class="mm-sub">42 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Open TO</p><p class="mm-sub">18 ▲ 6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">TO Completed</p><p class="mm-sub">245 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Processed</p><p class="mm-sub">186 ▲ 8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">DO Shipped</p><p class="mm-sub">158 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Stock Check</p><p class="mm-sub">100% ✓</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Time</p><p class="mm-sub">3.2hrs ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">ABC Class A</p><p class="mm-sub">3,450 items</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="lg:col-span-1 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Outgoing</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+    <div class="flex items-center justify-between mb-4">
+        <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +5.3%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +8.2%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +2</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +6</span></div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Location Used</p><p class="text-sm font-bold text-gray-900">38</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Transfer Order by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Draft</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Processing</p><p class="text-sm font-bold text-amber-600">6</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completed</p><p class="text-sm font-bold text-red-600">22</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Receiving Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">GR</p></div>
+                        <div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
+                        <div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">TO-2026-0421</td><td>Monthly inbound receiving</td><td class="font-mono text-xs">284</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">TO-2026-0420</td><td>Stock transfer - Zone A</td><td class="font-mono text-xs">42</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">TO-2026-0419</td><td>Bulk replenishment</td><td class="font-mono text-xs">186</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">TO-2026-0418</td><td>DO picking preparation</td><td class="font-mono text-xs">38</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">GR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>GR Received</b> — GR-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 24,500 units · Vendor: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Complete</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">DO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>DO Shipped</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🚚 86,200 units · DO-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Shipped</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">TO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>TO Completed</b> — Transfer Zone A→’B</p><p class="text-xs text-gray-400 mt-0.5">📋 42,800 units · Batch transfer</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Done</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">QC</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>QC Check</b> — Inspection batch #2106</p><p class="text-xs text-gray-400 mt-0.5">🔍 38,400 units · Pass rate 99.2%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone A</p>
+                                        <span class="text-[11px] font-semibold text-green-600">99.2% / 99.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone B</p>
+                                        <span class="text-[11px] font-semibold">97.5% / 98.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone C</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.6% / 97.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7% / 98.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
+                    <p class="text-xs text-gray-400 mb-3">This period ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-[10px] text-green-600">+15%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-[10px] text-green-600">+12%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Part C</p><p class="text-sm font-bold text-blue-700">6,180 <span class="text-[10px] text-green-600">+8%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-[10px] text-green-600">+5%</span></p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
+                    <p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pass Rate</p><p class="text-[10px] text-gray-400">Quality inspection pass</p></div>
+                            <div class="text-right"><span class="chip chip-blue">99.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Damage</p><p class="text-[10px] text-gray-400">Damaged items rate</p></div>
+                            <div class="text-right"><span class="chip chip-purple">0.8%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
+                            <div class="text-right"><span class="chip chip-orange">0.5%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">On Hold</p><p class="text-[10px] text-gray-400">On hold for inspection</p></div>
+                            <div class="text-right"><span class="chip chip-red">1.2%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>DO#</th><th>Customer</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-wms3.cshtml b/Pages/Dashboard/dashboard-wms3.cshtml
new file mode 100644
index 0000000..3347467
--- /dev/null
+++ b/Pages/Dashboard/dashboard-wms3.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-wms3"
+@{
+    ViewData["Title"] = "Dashboard WMS 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["Js:dashboard-wms.js"] = "js/dashboard-wms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +2</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+    <div>
+        <div class="flex items-center justify-between mb-4">
+            <div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
+        </div>
+        <div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><canvas id="expenseChart"></canvas></div></div>
+        <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Racking <span class="font-semibold ml-auto">42%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Bulk <span class="font-semibold ml-auto">22%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Overflow <span class="font-semibold ml-auto">15%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Cold <span class="font-semibold ml-auto">12%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+        </div>
+    </div>
+</div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">WMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →’</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Items</p><p class="mm-sub">84,500 ▲ 5.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Locations</p><p class="mm-sub">42 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Open TO</p><p class="mm-sub">18 ▲ 6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">TO Completed</p><p class="mm-sub">245 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Processed</p><p class="mm-sub">186 ▲ 8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">DO Shipped</p><p class="mm-sub">158 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Stock Check</p><p class="mm-sub">100% ✓</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Time</p><p class="mm-sub">3.2hrs ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">ABC Class A</p><p class="mm-sub">3,450 items</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="lg:col-span-1 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Outgoing</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+    <div class="flex items-center justify-between mb-4">
+        <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +5.3%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +8.2%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +2</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +6</span></div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Location Used</p><p class="text-sm font-bold text-gray-900">38</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Item Value</p><p class="text-sm font-bold text-indigo-700">$149</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Transfer Order by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Draft</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Processing</p><p class="text-sm font-bold text-amber-600">6</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completed</p><p class="text-sm font-bold text-red-600">22</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cancelled</p><p class="text-sm font-bold text-indigo-700">3</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Receiving Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">GR</p></div>
+                        <div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
+                        <div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone A</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone B</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone C</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target Acc: <b class="text-green-600">99%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
+                    <p class="text-xs text-gray-400 mb-3">This period ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-green-600 text-[10px]">+15%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-green-600 text-[10px]">+12%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Part C</p><p class="text-sm font-bold text-indigo-700">6,180 <span class="text-green-600 text-[10px]">+8%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-green-600 text-[10px]">+5%</span></p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
+                    <p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pass Rate</p><p class="text-[10px] text-gray-400">Inspection pass %</p></div>
+                            <div class="text-right"><span class="chip chip-blue">Jul 10</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Damage</p><p class="text-[10px] text-gray-400">Damaged items</p></div>
+                            <div class="text-right"><span class="chip chip-purple">Jul 15</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
+                            <div class="text-right"><span class="chip chip-orange">Jul 20</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
+                            <div class="text-right"><span class="chip chip-red">Apr 30</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage DO →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>DO#</th><th>Customer</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-wms4.cshtml b/Pages/Dashboard/dashboard-wms4.cshtml
new file mode 100644
index 0000000..49b9013
--- /dev/null
+++ b/Pages/Dashboard/dashboard-wms4.cshtml
@@ -0,0 +1,414 @@
+@page "/dashboard-wms4"
+@{
+    ViewData["Title"] = "Dashboard WMS 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["Js:dashboard-wms.js"] = "js/dashboard-wms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +2</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+    <div>
+        <div class="flex items-center justify-between mb-4">
+            <div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
+        </div>
+        <div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><canvas id="expenseChart"></canvas></div></div>
+        <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Racking <span class="font-semibold ml-auto">42%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Bulk <span class="font-semibold ml-auto">22%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Overflow <span class="font-semibold ml-auto">15%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Cold <span class="font-semibold ml-auto">12%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+        </div>
+    </div>
+</div>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">WMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →’</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Items</p><p class="mm-sub">84,500 ▲ 5.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Locations</p><p class="mm-sub">42 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Open TO</p><p class="mm-sub">18 ▲ 6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">TO Completed</p><p class="mm-sub">245 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Processed</p><p class="mm-sub">186 ▲ 8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">DO Shipped</p><p class="mm-sub">158 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Stock Check</p><p class="mm-sub">100% ✓</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Time</p><p class="mm-sub">3.2hrs ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">ABC Class A</p><p class="mm-sub">3,450 items</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="lg:col-span-1 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Outgoing</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+    <div class="flex items-center justify-between mb-4">
+        <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +5.3%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +8.2%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +2</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +6</span></div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of Q2 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Location Used</p><p class="text-sm font-bold text-gray-900">38</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Item Value</p><p class="text-sm font-bold text-indigo-700">$149</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Transfer Order by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Draft</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Processing</p><p class="text-sm font-bold text-amber-600">6</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completed</p><p class="text-sm font-bold text-red-600">22</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cancelled</p><p class="text-sm font-bold text-indigo-700">3</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Receiving Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">GR</p></div>
+                        <div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
+                        <div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">TO-2026-0421</td><td>Stock replenishment Zone A</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">TO-2026-0420</td><td>Cross-dock transfer</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">TO-2026-0419</td><td>Bulk to picking zone</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Completed</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">TO-2026-0418</td><td>Overflow relocation</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Processing</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">TO</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>TO Completed</b> — TO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 24 items · Zone: A to B</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Done</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">GR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>GR Received</b> — Vendor: Supplier A</p><p class="text-xs text-gray-400 mt-0.5">📥 86 units · PO-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">ST</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stock Adjustment</b> — Zone C</p><p class="text-xs text-gray-400 mt-0.5">📋 42 units · Cycle count variance</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">QC</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>QC Passed</b> — Batch #B-2026</p><p class="text-xs text-gray-400 mt-0.5">✅ 38 units · Quality inspection passed</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone A</p>
+                                        <span class="text-[11px] font-semibold text-green-600">99.2% / 99.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:100%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone B</p>
+                                        <span class="text-[11px] font-semibold">98.5% / 98.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:100%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone C</p>
+                                        <span class="text-[11px] font-semibold text-green-600">97.8% / 98.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall</p>
+                                        <span class="text-[11px] font-semibold text-green-600">98.7% / 99.0%</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:99%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target Acc: <b class="text-green-600">99%</b></span><span class="text-indigo-600">On Track</span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
+                    <p class="text-xs text-gray-400 mb-3">This period ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-[10px] text-green-600 font-semibold">+15%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-[10px] text-green-600 font-semibold">+12%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Part C</p><p class="text-sm font-bold text-indigo-700">6,180 <span class="text-[10px] text-green-600 font-semibold">+8%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-[10px] text-green-600 font-semibold">+5%</span></p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
+                    <p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pass Rate</p><p class="text-[10px] text-gray-400">QC inspection results</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98.7%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Damage</p><p class="text-[10px] text-gray-400">Items damaged in handling</p></div>
+                            <div class="text-right"><span class="chip chip-purple">0.8%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
+                            <div class="text-right"><span class="chip chip-orange">1.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">On Hold</p><p class="text-[10px] text-gray-400">Pending inspection items</p></div>
+                            <div class="text-right"><span class="chip chip-red">0.3%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
+                            <div class="text-right"><span class="chip chip-red">0.5%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
+                </div>
+                <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
+                        <span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage DO →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>DO#</th><th>Customer</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Dashboard/dashboard-wms5.cshtml b/Pages/Dashboard/dashboard-wms5.cshtml
new file mode 100644
index 0000000..bae41a3
--- /dev/null
+++ b/Pages/Dashboard/dashboard-wms5.cshtml
@@ -0,0 +1,409 @@
+@page "/dashboard-wms5"
+@{
+    ViewData["Title"] = "Dashboard WMS 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["Js:dashboard-wms.js"] = "js/dashboard-wms.js";
+
+}
+
+<div class="p-4 md:p-6 space-y-6">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</p></div>
+                <div class="flex items-center gap-2">
+                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
+                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
+                <div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
+                    <div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +2</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
+                </div>
+                <div class="lg:col-span-7 lg:col-start-1 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
+                    <div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
+                    <div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
+                </div>
+<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
+    <div>
+        <div class="flex items-center justify-between mb-4">
+            <div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
+        </div>
+        <div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><canvas id="expenseChart"></canvas></div></div>
+        <div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Racking <span class="font-semibold ml-auto">42%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Bulk <span class="font-semibold ml-auto">22%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Overflow <span class="font-semibold ml-auto">15%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Cold <span class="font-semibold ml-auto">12%</span></div>
+            <div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> Others <span class="font-semibold ml-auto">9%</span></div>
+        </div>
+    </div>
+</div>
+            </div>
+
+            <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                <div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">WMS Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →’</span></div>
+                <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                    <div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Items</p><p class="mm-sub">84,500 ▲ 5.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Locations</p><p class="mm-sub">42 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">Open TO</p><p class="mm-sub">18 ▲ 6</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">TO Completed</p><p class="mm-sub">245 ▲ 12%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Processed</p><p class="mm-sub">186 ▲ 8%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">DO Shipped</p><p class="mm-sub">158 ▲ 14%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Stock Check</p><p class="mm-sub">100% ✓</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">GR Time</p><p class="mm-sub">3.2hrs ▼ 0.5</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.2%</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">ABC Class A</p><p class="mm-sub">3,450 items</p></div></div>
+                    <div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</p></div>
+                        <div class="flex items-center gap-3 text-xs">
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
+                            <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Outgoing</span>
+                        </div>
+                    </div>
+                    <div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
+                </div>
+<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+    <div class="flex items-center justify-between mb-4">
+        <div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
+        <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mt-2">
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +5.3%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +8.2%</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +2</span></div>
+        <div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">&#9650; +6</span></div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
+</div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Summary</h3>
+                    <p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Location Used</p><p class="text-sm font-bold text-gray-900">38</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
+                    </div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
+                    <p class="text-xs text-gray-400 mb-3">Transfer Order by status</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Draft</p><p class="text-sm font-bold text-green-700">8</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Processing</p><p class="text-sm font-bold text-amber-600">6</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Completed</p><p class="text-sm font-bold text-red-600">22</p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Receiving Activity</h3>
+                    <p class="text-xs text-gray-400 mb-3">Monthly movement</p>
+                    <div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
+                    <div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
+                        <div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">GR</p></div>
+                        <div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
+                        <div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
+                    </div>
+                    <div class="grid-wrap">
+                        <table class="grid-table">
+                            <thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
+                            <tbody>
+                                <tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
+                                <tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
+                        <span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-600 font-medium">Live</span></span>
+                    </div>
+                    <div class="activity-feed divide-y divide-gray-100 pr-1">
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
+                            <span class="chip chip-green self-start">Paid</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
+                            <span class="chip chip-green self-start">Received</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
+                            <span class="chip chip-indigo self-start">Posted</span>
+                        </div>
+                        <div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
+                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
+                            <div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
+                            <span class="chip chip-amber self-start">Pending</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
+                    <h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</h3>
+                    <p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
+                    <div class="space-y-2.5">
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone A</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone B</p>
+                                        <span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Zone C</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                            <div class="flex items-center gap-3">
+                                <div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
+                                <div class="flex-1 min-w-0">
+                                    <div class="flex justify-between items-center">
+                                        <p class="text-xs text-gray-500 font-semibold">Overall</p>
+                                        <span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
+                                    </div>
+                                    <div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-600">On Track</span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
+                    <p class="text-xs text-gray-400 mb-3">This period ranking</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-green-600 text-xs">+15%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-green-600 text-xs">+12%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Part C</p><p class="text-sm font-bold text-blue-700">6,180 <span class="text-green-600 text-xs">+8%</span></p></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-green-600 text-xs">+5%</span></p></div>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
+                    <p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</p>
+                    <div class="space-y-2.5">
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Pass Rate</p><p class="text-[10px] text-gray-400">Monthly inspection</p></div>
+                            <div class="text-right"><span class="chip chip-blue">98.5%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Damage/Reject</p><p class="text-[10px] text-gray-400">Quality check</p></div>
+                            <div class="text-right"><span class="chip chip-purple">0.8%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">On Hold</p><p class="text-[10px] text-gray-400">Pending review</p></div>
+                            <div class="text-right"><span class="chip chip-orange">1.2%</span></div>
+                        </div>
+                        <div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
+                            <div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
+                            <div class="flex-1"><p class="text-xs text-gray-500">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
+                            <div class="text-right"><span class="chip chip-red">0.3%</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View Full →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
+                                    <tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
+                </div>
+                <div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div><h3 class="font-bold text-gray-900">Upcoming Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
+                        <span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</span>
+                    </div>
+                    <div class="p-3 rounded-lg" style="background:#f8fafc;">
+                        <div class="grid-wrap">
+                            <table class="grid-table" style="background:transparent;">
+                                <thead><tr><th>DO#</th><th>Customer</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
+                                <tbody>
+                                    <tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                    <tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
+                </div>
+            </div>
+
+        </div>
diff --git a/Pages/Error.cshtml b/Pages/Error.cshtml
new file mode 100644
index 0000000..6f92b95
--- /dev/null
+++ b/Pages/Error.cshtml
@@ -0,0 +1,26 @@
+@page
+@model ErrorModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
diff --git a/Pages/Error.cshtml.cs b/Pages/Error.cshtml.cs
new file mode 100644
index 0000000..d6df81a
--- /dev/null
+++ b/Pages/Error.cshtml.cs
@@ -0,0 +1,21 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.Diagnostics;
+
+namespace Indotalent.Pages
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    [IgnoreAntiforgeryToken]
+    public class ErrorModel : PageModel
+    {
+        public string? RequestId { get; set; }
+
+        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+        public void OnGet()
+        {
+            RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+        }
+    }
+
+}
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
new file mode 100644
index 0000000..2c4e6d3
--- /dev/null
+++ b/Pages/Index.cshtml
@@ -0,0 +1,306 @@
+@page
+@{
+    Layout = null;
+}
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EnterpriseKit — Admin Template Showcase</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: "Poppins", sans-serif; }
+        [x-cloak] { display: none !important; }
+        .gradient-bg { background: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, #f8fafc 45%, #ffffff 100%); }
+        .nav-link { position: relative; color: #64748b; font-size: .875rem; font-weight: 500; transition: color .2s; text-decoration: none; }
+        .nav-link:hover { color: #4f46e5; }
+        .card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
+        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,23,42,.25); }
+        .img-zoom { transition: transform .4s ease; }
+        .card-hover:hover .img-zoom { transform: scale(1.04); }
+        .chip { font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
+    </style>
+</head>
+    <body class="bg-white text-slate-800 antialiased" x-data="showcase()" x-init="initScrollSpy(); showTop = window.scrollY > 400; window.addEventListener('scroll', () => { showTop = window.scrollY > 400; })">
+
+    <!-- NAVBAR -->
+    <nav class="sticky top-0 z-50 bg-white/85 backdrop-blur border-b border-slate-100" x-data="{ mobileOpen: false }">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center gap-10">
+                    <a class="flex items-center gap-2 font-bold text-lg text-slate-800 no-underline" href="#top">
+                        <svg class="w-7 h-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                        <span>EnterpriseKit</span>
+                    </a>
+                    <div class="hidden md:flex items-center gap-8">
+                        <a class="nav-link" x-bind:class="activeSection==='top' && '!text-indigo-600 font-semibold'" href="#top">Overview</a>
+                        <a class="nav-link" x-bind:class="activeSection==='apps' && '!text-indigo-600 font-semibold'" href="#apps">Applications</a>
+                        <a class="nav-link" x-bind:class="activeSection==='themes' && '!text-indigo-600 font-semibold'" href="#themes">Themes</a>
+                        <a class="nav-link" x-bind:class="activeSection==='kit' && '!text-indigo-600 font-semibold'" href="#kit">The Kit</a>
+                    </div>
+                </div>
+                <div class="hidden md:flex items-center gap-3">
+                    <a class="nav-link" href="#apps">Browse Templates</a>
+                    <a href="https://indotalent.com" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
+                        Get Source Code
+                    </a>
+                </div>
+                <button class="md:hidden p-2 text-slate-500" @@click="mobileOpen = !mobileOpen">
+                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+                </button>
+            </div>
+            <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-1">
+                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#top">Overview</a>
+                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#apps">Applications</a>
+                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#themes">Themes</a>
+                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#kit">The Kit</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- HERO -->
+    <section id="top" class="gradient-bg">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32 text-center">
+            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-700 text-xs font-semibold mb-6">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Part of the Enterprise Development Kit · ASP.NET Core Razor Pages Edition
+            </div>
+            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight">Clean, Professional Admin Templates</h1>
+            <p class="mt-5 max-w-2xl mx-auto text-lg text-slate-500">A modern, light, minimalist admin template built with <span class="font-semibold text-slate-700">Tailwind CSS</span> and <span class="font-semibold text-slate-700">Alpine.js</span>. Explore ten business-grade dashboards, each available in five carefully crafted color themes.</p>
+            <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
+                <a href="#apps" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
+                    Explore Dashboards
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
+                </a>
+                <a href="#themes" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 transition no-underline">View Theme Variants</a>
+            </div>
+            <div class="mt-14 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
+                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">10</p><p class="text-xs text-slate-500 mt-1">Business Apps</p></div>
+                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">5</p><p class="text-xs text-slate-500 mt-1">Color Themes</p></div>
+                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">50</p><p class="text-xs text-slate-500 mt-1">Demo Pages</p></div>
+                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">100%</p><p class="text-xs text-slate-500 mt-1">Responsive</p></div>
+            </div>
+        </div>
+    </section>
+
+    <!-- APPLICATIONS -->
+    <section id="apps" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div class="text-center max-w-2xl mx-auto mb-12">
+            <p class="chip text-indigo-600 font-semibold">Business Applications</p>
+            <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Ten ready-to-use dashboards</h2>
+            <p class="mt-3 text-slate-500">Each application ships with five theme variants. Click any thumbnail to open the live preview.</p>
+        </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
+            <template x-for="app in apps" x-bind:key="app.key">
+                <div class="card-hover bg-white rounded-2xl border border-slate-100 overflow-hidden shadow-sm" x-data="{ open: false, slide: 0 }">
+                    <div class="relative overflow-hidden bg-slate-100 aspect-[2/1] group" @@mouseenter="pause=true" @@mouseleave="pause=false" x-init="setInterval(() => { if(!pause) slide = (slide + 1) % app.shots.length }, 4000)" x-data="{ pause: false }">
+                        <div class="flex h-full transition-transform duration-500 ease-out" x-bind:style="`transform: translateX(-${slide * 100}%)`">
+                            <template x-for="(shot, i) in app.shots" x-bind:key="i">
+                                <a x-bind:href="'/' + app.key + (i+1)" target="_blank" rel="noopener"
+                                   class="relative shrink-0 w-full h-full block cursor-pointer">
+                                    <img x-bind:src="shot" x-bind:alt="app.name + ' theme ' + (i+1) + ' preview'"
+                                         class="img-zoom w-full h-full object-contain object-top">
+                                </a>
+                            </template>
+                        </div>
+                        <span class="chip absolute top-3 left-3 z-10 px-2 py-1 rounded-md bg-white/90 text-slate-600 shadow-sm" x-text="app.abbr"></span>
+                        <span class="absolute top-3 right-3 z-10 inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/95 text-indigo-600 text-xs font-semibold shadow-sm">
+                            <span x-text="(slide+1) + ' / ' + app.shots.length"></span>
+                        </span>
+
+                        <button class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
+                                @@click="slide = (slide - 1 + app.shots.length) % app.shots.length" aria-label="Previous">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
+                        </button>
+                        <button class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
+                                @@click="slide = (slide + 1) % app.shots.length" aria-label="Next">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+                        </button>
+
+                        <div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
+                            <template x-for="(shot, i) in app.shots" x-bind:key="i">
+                                <button class="w-2 h-2 rounded-full transition-colors"
+                                        x-bind:class="slide === i ? 'bg-indigo-600 w-4' : 'bg-white/70 hover:bg-white'"
+                                        @@click="slide = i" x-bind:aria-label="'Go to slide ' + (i+1)"></button>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div class="flex items-start justify-between gap-3">
+                            <div>
+                                <h3 class="text-lg font-bold text-slate-900" x-text="app.name"></h3>
+                                <p class="text-xs text-slate-400 font-medium" x-text="app.full"></p>
+                            </div>
+                            <button @@click="open = !open" class="shrink-0 text-slate-400 hover:text-indigo-600 p-1" x-bind:title="open ? 'Hide themes' : 'Show themes'">
+                                <svg class="w-5 h-5 transition-transform" x-bind:class="open && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+                            </button>
+                        </div>
+                        <p class="mt-2 text-sm text-slate-500 leading-relaxed" x-text="app.summary"></p>
+
+                        <div x-show="open" x-cloak x-collapse class="mt-4 pt-4 border-t border-slate-100">
+                            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">Choose a theme</p>
+                            <div class="grid grid-cols-1 gap-2">
+                                <template x-for="t in themes" x-bind:key="t.id">
+                                    <a x-bind:href="'/' + app.key + t.id" target="_blank" rel="noopener"
+                                       class="flex items-center gap-3 px-3 py-2 rounded-lg border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/50 transition no-underline group">
+                                        <span class="w-5 h-5 rounded-full ring-2 ring-white shadow" x-bind:style="`background:${t.color}`"></span>
+                                        <span class="text-sm font-medium text-slate-700 group-hover:text-indigo-700" x-text="t.name + ' Theme'"></span>
+                                        <svg class="w-4 h-4 ml-auto text-slate-300 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+                                    </a>
+                                </template>
+                            </div>
+                        </div>
+
+                            <a x-bind:href="'/' + app.key + '1'" target="_blank" rel="noopener" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700 no-underline">
+                            Open default preview
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </section>
+
+    <!-- THEMES -->
+    <section id="themes" class="bg-slate-50 border-y border-slate-100">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+            <div class="text-center max-w-2xl mx-auto mb-12">
+                <p class="chip text-indigo-600 font-semibold">Theme Variants</p>
+                <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Five professional palettes</h2>
+                <p class="mt-3 text-slate-500">Every dashboard is generated in five modern, light, minimalist themes so you can match your brand identity instantly.</p>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
+                <template x-for="t in themes" x-bind:key="t.id">
+                    <div class="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm text-center card-hover">
+                        <div class="w-14 h-14 mx-auto rounded-2xl flex items-center justify-center shadow-sm" x-bind:style="`background:${t.color}`">
+                            <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h8a2 2 0 002-2v-4a2 2 0 00-2-2H7m8-12h2a2 2 0 012 2v4a2 2 0 01-2 2h-2"/></svg>
+                        </div>
+                        <h3 class="mt-4 font-bold text-slate-900" x-text="t.name"></h3>
+                        <p class="mt-1 text-xs text-slate-400" x-text="t.desc"></p>
+                        <span class="mt-3 inline-block chip px-2 py-1 rounded-md" x-bind:style="`background:${t.soft};color:${t.color}`" x-text="t.tag"></span>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </section>
+
+    <!-- THE KIT -->
+    <section id="kit" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div class="text-center max-w-2xl mx-auto mb-12">
+            <p class="chip text-indigo-600 font-semibold">The Enterprise Development Kit</p>
+            <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">A complete front-end foundation</h2>
+            <p class="mt-3 text-slate-500">The admin template is a building block of the Enterprise Development Kit — a clean, professional UI layer for line-of-business applications.</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
+                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
+                <h3 class="mt-4 font-bold text-slate-900">Lightweight & Fast</h3>
+                <p class="mt-2 text-sm text-slate-500">Built on Tailwind CSS and Alpine.js — no heavy build step, no framework lock-in, just clean composable markup.</p>
+            </div>
+            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
+                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></div>
+                <h3 class="mt-4 font-bold text-slate-900">Modular Components</h3>
+                <p class="mt-2 text-sm text-slate-500">Reusable cards, tables, forms, auth pages and widgets crafted for consistent, professional enterprise layouts.</p>
+            </div>
+            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
+                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
+                <h3 class="mt-4 font-bold text-slate-900">Fully Responsive</h3>
+                <p class="mt-2 text-sm text-slate-500">Mobile-first navigation, collapsible sidebars and fluid grids that look sharp from phone to wide desktop monitors.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- FOOTER -->
+    <footer class="bg-slate-900 text-slate-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                <div class="flex items-center gap-2 font-bold text-white text-lg">
+                    <svg class="w-7 h-7 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-slate-400">Admin Template — ASP.NET Core Razor Pages Edition, a component of the Enterprise Development Kit.</p>
+            </div>
+            <div class="mt-8 pt-8 border-t border-slate-800 text-xs text-slate-500 flex flex-col sm:flex-row justify-between gap-2">
+                <span>© 2026 EnterpriseKit. Built with Tailwind CSS & Alpine.js.</span>
+                <span>Clean · Professional · Minimalist</span>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        function showcase() {
+            return {
+                activeSection: 'top',
+                showTop: false,
+                themes: [
+                    { id: 1, name: 'Clean Grey',            color: '#334155', soft: '#f1f5f9', tag: 'Neutral',  desc: 'Refined graphite for a calm, corporate look.' },
+                    { id: 2, name: 'Soft Blue',            color: '#2563eb', soft: '#eff6ff', tag: 'Primary',  desc: 'Trusted light blue, ideal for SaaS products.' },
+                    { id: 3, name: 'Full Blue',           color: '#1d4ed8', soft: '#dbeafe', tag: 'Solid',    desc: 'Full saturated blue for strong brand presence.' },
+                    { id: 4, name: 'Full Blue Rounded',   color: '#1d4ed8', soft: '#dbeafe', tag: 'Rounded',  desc: 'Solid blue with fully rounded, pill-shaped controls.' },
+                    { id: 5, name: 'Soft Blue Box',        color: '#2563eb', soft: '#eff6ff', tag: 'Boxed',    desc: 'Soft blue with a contained, boxed layout style.' }
+                ],
+                apps: [
+                    { key: 'dashboard-crm', abbr: 'CRM', name: 'CRM', full: 'Customer Relationship Management', img: 'img/crm1.png',
+                      shots: ['img/crm1.png','img/crm2.png','img/crm3.png','img/crm4.png','img/crm5.png'],
+                      summary: 'Track leads, opportunities and pipelines. Monitor customer health, sales activities and revenue forecasts in one place.' },
+                    { key: 'dashboard-eam', abbr: 'EAM', name: 'EAM', full: 'Enterprise Asset Management', img: 'img/eam1.png',
+                      shots: ['img/eam1.png','img/eam2.png','img/eam3.png','img/eam4.png','img/eam5.png'],
+                      summary: 'Manage the full lifecycle of physical assets, maintenance schedules and utilization across locations.' },
+                    { key: 'dashboard-fms', abbr: 'FMS', name: 'FMS', full: 'Financial Management System', img: 'img/fms1.png',
+                      shots: ['img/fms1.png','img/fms2.png','img/fms3.png','img/fms4.png','img/fms5.png'],
+                      summary: 'Oversee budgets, cash flow, ledgers and financial reporting with clear, audit-ready dashboards.' },
+                    { key: 'dashboard-hrm', abbr: 'HRM', name: 'HRM', full: 'Human Resource Management', img: 'img/hrm1.png',
+                      shots: ['img/hrm1.png','img/hrm2.png','img/hrm3.png','img/hrm4.png','img/hrm5.png'],
+                      summary: 'Centralize employee records, attendance, leave and payroll for a productive workforce.' },
+                    { key: 'dashboard-itsm', abbr: 'ITSM', name: 'ITSM', full: 'IT Service Management', img: 'img/itsm1.png',
+                      shots: ['img/itsm1.png','img/itsm2.png','img/itsm3.png','img/itsm4.png','img/itsm5.png'],
+                      summary: 'Handle incidents, service requests and SLAs with a streamlined IT support operations view.' },
+                    { key: 'dashboard-pos', abbr: 'POS', name: 'POS', full: 'Point of Sale', img: 'img/pos1.png',
+                      shots: ['img/pos1.png','img/pos2.png','img/pos3.png','img/pos4.png','img/pos5.png'],
+                      summary: 'Process transactions, manage inventory and review store performance in real time.' },
+                    { key: 'dashboard-rms', abbr: 'RMS', name: 'RMS', full: 'Roster Management System', img: 'img/rms1.png',
+                      shots: ['img/rms1.png','img/rms2.png','img/rms3.png','img/rms4.png','img/rms5.png'],
+                      summary: 'Plan shifts, assign staff and optimize coverage with intuitive scheduling tools.' },
+                    { key: 'dashboard-scm', abbr: 'SCM', name: 'SCM', full: 'Supply Chain Management', img: 'img/scm1.png',
+                      shots: ['img/scm1.png','img/scm2.png','img/scm3.png','img/scm4.png','img/scm5.png'],
+                      summary: 'Coordinate procurement, logistics and suppliers to keep the supply chain resilient.' },
+                    { key: 'dashboard-tms', abbr: 'TMS', name: 'TMS', full: 'Talent Management System', img: 'img/tms1.png',
+                      shots: ['img/tms1.png','img/tms2.png','img/tms3.png','img/tms4.png','img/tms5.png'],
+                      summary: 'Attract, develop and retain talent with recruiting, goals and performance insights.' },
+                    { key: 'dashboard-wms', abbr: 'WMS', name: 'WMS', full: 'Warehouse Management System', img: 'img/wms1.png',
+                      shots: ['img/wms1.png','img/wms2.png','img/wms3.png','img/wms4.png','img/wms5.png'],
+                      summary: 'Control receiving, storage and fulfillment to boost warehouse throughput and accuracy.' }
+                ],
+                initScrollSpy() {
+                    const ids = ['top', 'apps', 'themes', 'kit'];
+                    const obs = new IntersectionObserver((entries) => {
+                        entries.forEach(e => { if (e.isIntersecting) this.activeSection = e.target.id; });
+                    }, { rootMargin: '-40% 0px -55% 0px' });
+                    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
+                }
+            }
+        }
+    </script>
+
+    <!-- BACK TO TOP FAB -->
+    <button x-show="showTop" x-cloak
+            @@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 translate-y-4"
+            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-4"
+            class="fixed bottom-6 right-6 z-50 w-12 h-12 flex items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-700 hover:shadow-xl transition-colors"
+            aria-label="Back to top">
+        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+    </button>
+
+</body>
+</html>
diff --git a/Pages/Index.cshtml.cs b/Pages/Index.cshtml.cs
new file mode 100644
index 0000000..528bad4
--- /dev/null
+++ b/Pages/Index.cshtml.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Indotalent.Pages
+{
+    public class IndexModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
diff --git a/Pages/Pages/badrequest1.cshtml b/Pages/Pages/badrequest1.cshtml
new file mode 100644
index 0000000..5da92a0
--- /dev/null
+++ b/Pages/Pages/badrequest1.cshtml
@@ -0,0 +1,19 @@
+@page "/badrequest1"
+@{
+    ViewData["Title"] = "Bad Request 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">400</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Bad Request</h1>
+                <p class="text-gray-500 mt-2">The server could not understand the request due to invalid syntax.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/badrequest2.cshtml b/Pages/Pages/badrequest2.cshtml
new file mode 100644
index 0000000..310f945
--- /dev/null
+++ b/Pages/Pages/badrequest2.cshtml
@@ -0,0 +1,19 @@
+@page "/badrequest2"
+@{
+    ViewData["Title"] = "Bad Request 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">400</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Bad Request</h1>
+                <p class="text-gray-500 mt-2">The server could not understand the request due to invalid syntax.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/badrequest3.cshtml b/Pages/Pages/badrequest3.cshtml
new file mode 100644
index 0000000..45d4090
--- /dev/null
+++ b/Pages/Pages/badrequest3.cshtml
@@ -0,0 +1,19 @@
+@page "/badrequest3"
+@{
+    ViewData["Title"] = "Bad Request 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">400</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Bad Request</h1>
+                <p class="text-gray-500 mt-2">The server could not understand the request due to invalid syntax.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/badrequest4.cshtml b/Pages/Pages/badrequest4.cshtml
new file mode 100644
index 0000000..89271a4
--- /dev/null
+++ b/Pages/Pages/badrequest4.cshtml
@@ -0,0 +1,19 @@
+@page "/badrequest4"
+@{
+    ViewData["Title"] = "Bad Request 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">400</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Bad Request</h1>
+                <p class="text-gray-500 mt-2">The server could not understand the request due to invalid syntax.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/badrequest5.cshtml b/Pages/Pages/badrequest5.cshtml
new file mode 100644
index 0000000..2530ea6
--- /dev/null
+++ b/Pages/Pages/badrequest5.cshtml
@@ -0,0 +1,19 @@
+@page "/badrequest5"
+@{
+    ViewData["Title"] = "Bad Request 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">400</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Bad Request</h1>
+                <p class="text-gray-500 mt-2">The server could not understand the request due to invalid syntax.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/empty1.cshtml b/Pages/Pages/empty1.cshtml
new file mode 100644
index 0000000..9843b85
--- /dev/null
+++ b/Pages/Pages/empty1.cshtml
@@ -0,0 +1,10 @@
+@page "/empty1"
+@{
+    ViewData["Title"] = "Empty 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+        </div>
diff --git a/Pages/Pages/empty2.cshtml b/Pages/Pages/empty2.cshtml
new file mode 100644
index 0000000..9f9f01a
--- /dev/null
+++ b/Pages/Pages/empty2.cshtml
@@ -0,0 +1,10 @@
+@page "/empty2"
+@{
+    ViewData["Title"] = "Empty 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+        </div>
diff --git a/Pages/Pages/empty3.cshtml b/Pages/Pages/empty3.cshtml
new file mode 100644
index 0000000..de853ad
--- /dev/null
+++ b/Pages/Pages/empty3.cshtml
@@ -0,0 +1,10 @@
+@page "/empty3"
+@{
+    ViewData["Title"] = "Empty 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+        </div>
diff --git a/Pages/Pages/empty4.cshtml b/Pages/Pages/empty4.cshtml
new file mode 100644
index 0000000..0d6720a
--- /dev/null
+++ b/Pages/Pages/empty4.cshtml
@@ -0,0 +1,10 @@
+@page "/empty4"
+@{
+    ViewData["Title"] = "Empty 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+        </div>
diff --git a/Pages/Pages/empty5.cshtml b/Pages/Pages/empty5.cshtml
new file mode 100644
index 0000000..2db0406
--- /dev/null
+++ b/Pages/Pages/empty5.cshtml
@@ -0,0 +1,10 @@
+@page "/empty5"
+@{
+    ViewData["Title"] = "Empty 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 space-y-6">
+        </div>
diff --git a/Pages/Pages/error5001.cshtml b/Pages/Pages/error5001.cshtml
new file mode 100644
index 0000000..2cbc760
--- /dev/null
+++ b/Pages/Pages/error5001.cshtml
@@ -0,0 +1,19 @@
+@page "/error5001"
+@{
+    ViewData["Title"] = "Error 500 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">500</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Internal Server Error</h1>
+                <p class="text-gray-500 mt-2">The server encountered an internal error and could not complete your request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/error5002.cshtml b/Pages/Pages/error5002.cshtml
new file mode 100644
index 0000000..da01333
--- /dev/null
+++ b/Pages/Pages/error5002.cshtml
@@ -0,0 +1,19 @@
+@page "/error5002"
+@{
+    ViewData["Title"] = "Error 500 2";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">500</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Internal Server Error</h1>
+                <p class="text-gray-500 mt-2">The server encountered an internal error and could not complete your request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/error5003.cshtml b/Pages/Pages/error5003.cshtml
new file mode 100644
index 0000000..c08a5ad
--- /dev/null
+++ b/Pages/Pages/error5003.cshtml
@@ -0,0 +1,19 @@
+@page "/error5003"
+@{
+    ViewData["Title"] = "Error 500 3";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">500</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Internal Server Error</h1>
+                <p class="text-gray-500 mt-2">The server encountered an internal error and could not complete your request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/error5004.cshtml b/Pages/Pages/error5004.cshtml
new file mode 100644
index 0000000..cc10cdd
--- /dev/null
+++ b/Pages/Pages/error5004.cshtml
@@ -0,0 +1,19 @@
+@page "/error5004"
+@{
+    ViewData["Title"] = "Error 500 4";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">500</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Internal Server Error</h1>
+                <p class="text-gray-500 mt-2">The server encountered an internal error and could not complete your request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/error5005.cshtml b/Pages/Pages/error5005.cshtml
new file mode 100644
index 0000000..16536ae
--- /dev/null
+++ b/Pages/Pages/error5005.cshtml
@@ -0,0 +1,35 @@
+@page "/error5005"
+@{
+    ViewData["Title"] = "Error 500 5";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="flex items-center gap-4">
+                <button x-on:click="side = !side" class="p-2 rounded-lg hover:bg-gray-100 transition"><svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+            </div>
+            <div class="flex items-center gap-3">
+                <button class="relative p-2 rounded-lg hover:bg-gray-100 transition">
+                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
+                    <span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-blue-500 text-white text-[10px] flex items-center justify-center font-bold">3</span>
+                </button>
+                <div class="flex items-center gap-2 pl-3 ml-1 border-l border-gray-200">
+                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background: #3b82f6;">JD</div>
+                    <div class="hidden sm:block text-sm leading-tight"><p class="font-semibold text-gray-800">John Doe</p><p class="text-gray-400 text-xs">Sales Admin</p></div>
+                </div>
+            </div>
+        </header>
+        <div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">500</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Internal Server Error</h1>
+                <p class="text-gray-500 mt-2">The server encountered an internal error and could not complete your request.</p>
+                <a href="/dashboard5" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/forbidden1.cshtml b/Pages/Pages/forbidden1.cshtml
new file mode 100644
index 0000000..8e2b2a8
--- /dev/null
+++ b/Pages/Pages/forbidden1.cshtml
@@ -0,0 +1,19 @@
+@page "/forbidden1"
+@{
+    ViewData["Title"] = "Forbidden 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">403</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Forbidden</h1>
+                <p class="text-gray-500 mt-2">You do not have permission to access this page.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/forbidden2.cshtml b/Pages/Pages/forbidden2.cshtml
new file mode 100644
index 0000000..7aa49bc
--- /dev/null
+++ b/Pages/Pages/forbidden2.cshtml
@@ -0,0 +1,19 @@
+@page "/forbidden2"
+@{
+    ViewData["Title"] = "Forbidden 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">403</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Forbidden</h1>
+                <p class="text-gray-500 mt-2">You do not have permission to access this page.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/forbidden3.cshtml b/Pages/Pages/forbidden3.cshtml
new file mode 100644
index 0000000..bcc0502
--- /dev/null
+++ b/Pages/Pages/forbidden3.cshtml
@@ -0,0 +1,19 @@
+@page "/forbidden3"
+@{
+    ViewData["Title"] = "Forbidden 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">403</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Forbidden</h1>
+                <p class="text-gray-500 mt-2">You do not have permission to access this page.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/forbidden4.cshtml b/Pages/Pages/forbidden4.cshtml
new file mode 100644
index 0000000..cd7e767
--- /dev/null
+++ b/Pages/Pages/forbidden4.cshtml
@@ -0,0 +1,19 @@
+@page "/forbidden4"
+@{
+    ViewData["Title"] = "Forbidden 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">403</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Forbidden</h1>
+                <p class="text-gray-500 mt-2">You do not have permission to access this page.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/forbidden5.cshtml b/Pages/Pages/forbidden5.cshtml
new file mode 100644
index 0000000..2df17f3
--- /dev/null
+++ b/Pages/Pages/forbidden5.cshtml
@@ -0,0 +1,19 @@
+@page "/forbidden5"
+@{
+    ViewData["Title"] = "Forbidden 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">403</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Forbidden</h1>
+                <p class="text-gray-500 mt-2">You do not have permission to access this page.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/landing1.cshtml b/Pages/Pages/landing1.cshtml
new file mode 100644
index 0000000..747ebb2
--- /dev/null
+++ b/Pages/Pages/landing1.cshtml
@@ -0,0 +1,251 @@
+@page "/landing1"
+@{
+    ViewData["Title"] = "Landing 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:landing1.css"] = "css/landing1.css";
+    ViewData["Js:landing.js"] = "js/landing.js";
+
+}
+
+<div x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
+
+<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100" x-data="{ mobileOpen: false }">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+            <div class="flex items-center gap-10">
+                <a class="flex items-center gap-2 text-gray-800 font-bold text-lg no-underline" href="#">
+                    <svg class="w-7 h-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <span>EnterpriseKit</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a class="nav-link active" href="#home">Home</a>
+                    <a class="nav-link" href="#tech">Technologies</a>
+                    <a class="nav-link" href="#arch">Architecture</a>
+                    <a class="nav-link" href="#frontend">Frontend</a>
+                    <a class="nav-link" href="#cta">Get Started</a>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-3">
+                <a class="nav-link" href="#">Sign In</a>
+                <button class="btn-primary">Get Started</button>
+            </div>
+            <button class="md:hidden p-2 text-gray-500 hover:text-gray-700" @@click="mobileOpen = !mobileOpen">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </button>
+        </div>
+        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#home">Home</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#tech">Technologies</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#arch">Architecture</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#frontend">Frontend</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#cta">Get Started</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-50" href="#">Sign In</a>
+            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
+        </div>
+    </div>
+</nav>
+
+<section id="home" class="relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-transparent pointer-events-none"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="hero-badge mx-auto mb-6">
+                <svg class="w-3.5 h-3.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Built with .NET 10 & ASP.NET Core
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
+                Build Enterprise Apps<br/>
+                <span class="gradient-text">Faster Than Ever</span>
+            </h1>
+            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
+                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
+                Multitenant, multibranch, and ready for the cloud.
+            </p>
+            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+                <button class="btn-primary text-base px-8 py-3.5">
+                    Start Building
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </button>
+                <button class="btn-outline text-base px-8 py-3.5">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Watch Demo
+                </button>
+            </div>
+            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
+                <span class="font-medium text-gray-500">Trusted by</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> Enterprise Ready</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="tech" class="py-20 md:py-28 border-t border-gray-100">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-50 text-gray-500 text-xs font-semibold rounded-full border border-gray-200">TECHNOLOGY STACK</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">MVC</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# 14</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
+        </div>
+    </div>
+</section>
+
+<section id="arch" class="py-20 md:py-28 bg-gray-50/50 border-t border-gray-100">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-50 text-gray-500 text-xs font-semibold rounded-full border border-gray-200">ARCHITECTURE</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Multitenant & Multibranch</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="frontend" class="py-20 md:py-28 border-t border-gray-100">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-50 text-gray-500 text-xs font-semibold rounded-full border border-gray-200">FRONTEND</span>
+                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
+                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
+                <div class="mt-8 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-gray-900">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-gray-900">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-gray-900">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-gray-900">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="cta" class="py-20 md:py-28 bg-gray-900 text-white border-t border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold">Ready to Build?</h2>
+        <p class="mt-4 text-gray-400 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
+        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button class="inline-flex items-center gap-2 px-6 py-3 bg-white text-gray-900 font-semibold rounded-lg hover:bg-gray-200 transition text-sm">Get Started Free</button>
+        </div>
+    </div>
+</section>
+
+<footer class="bg-gray-900 border-t border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
+            <div>
+                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
+                    <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Platform</h4>
+                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Features</h4>
+                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Resources</h4>
+                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</a></div>
+            </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-gray-600">&copy; 2026 EnterpriseKit. All rights reserved.</p>
+            <div class="flex gap-4">
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+</button>
+</div>
+
+
+    <script src="js/landing.js"></script>
diff --git a/Pages/Pages/landing2.cshtml b/Pages/Pages/landing2.cshtml
new file mode 100644
index 0000000..463e67d
--- /dev/null
+++ b/Pages/Pages/landing2.cshtml
@@ -0,0 +1,251 @@
+@page "/landing2"
+@{
+    ViewData["Title"] = "Landing 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:landing2.css"] = "css/landing2.css";
+    ViewData["Js:landing.js"] = "js/landing.js";
+
+}
+
+<div x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
+
+<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-blue-50" x-data="{ mobileOpen: false }">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+            <div class="flex items-center gap-10">
+                <a class="flex items-center gap-2 text-blue-600 font-bold text-lg no-underline" href="#">
+                    <svg class="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <span>EnterpriseKit</span>
+                </a>
+                <div class="hidden md:flex items-center gap-1">
+                    <a class="nav-link active px-3 py-1.5 rounded-md bg-blue-50" href="#home">Home</a>
+                    <a class="nav-link px-3 py-1.5 rounded-md" href="#tech">Technologies</a>
+                    <a class="nav-link px-3 py-1.5 rounded-md" href="#arch">Architecture</a>
+                    <a class="nav-link px-3 py-1.5 rounded-md" href="#frontend">Frontend</a>
+                    <a class="nav-link px-3 py-1.5 rounded-md" href="#cta">Get Started</a>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-3">
+                <a class="nav-link" href="#">Sign In</a>
+                <button class="btn-primary">Get Started</button>
+            </div>
+            <button class="md:hidden p-2 text-blue-500 hover:text-blue-700" @@click="mobileOpen = !mobileOpen">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </button>
+        </div>
+        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
+            <a class="block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md font-medium" href="#home">Home</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#tech">Technologies</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#arch">Architecture</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#frontend">Frontend</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#cta">Get Started</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 rounded-md hover:bg-blue-50" href="#">Sign In</a>
+            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
+        </div>
+    </div>
+</nav>
+
+<section id="home" class="relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-b from-blue-50/30 to-transparent pointer-events-none"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="hero-badge mx-auto mb-6">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Built with .NET 10 & ASP.NET Core
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
+                Build Enterprise Apps<br/>
+                <span class="gradient-text">Faster Than Ever</span>
+            </h1>
+            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
+                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
+                Multitenant, multibranch, and ready for the cloud.
+            </p>
+            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+                <button class="btn-primary text-base px-8 py-3.5">
+                    Start Building
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </button>
+                <button class="btn-outline text-base px-8 py-3.5">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Watch Demo
+                </button>
+            </div>
+            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
+                <span class="font-medium text-gray-500">Trusted by</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> Enterprise Ready</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="tech" class="py-20 md:py-28 border-t border-blue-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">TECHNOLOGY STACK</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">MVC</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# 14</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
+        </div>
+    </div>
+</section>
+
+<section id="arch" class="py-20 md:py-28 bg-blue-50/30 border-t border-blue-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">ARCHITECTURE</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Multitenant & Multibranch</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-blue-50 hover:shadow-sm hover:border-blue-100 transition-all">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="frontend" class="py-20 md:py-28 border-t border-blue-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">FRONTEND</span>
+                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
+                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
+                <div class="mt-8 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
+                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
+                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
+                <div class="p-5 bg-blue-50/50 rounded-xl border border-blue-100"><div class="text-2xl font-bold text-blue-600">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="cta" class="py-20 md:py-28 bg-blue-600 text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold">Ready to Build?</h2>
+        <p class="mt-4 text-blue-100 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
+        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button class="inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition text-sm">Get Started Free</button>
+        </div>
+    </div>
+</section>
+
+<footer class="bg-slate-900 border-t border-slate-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
+            <div>
+                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
+                    <svg class="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Platform</h4>
+                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Features</h4>
+                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Resources</h4>
+                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</a></div>
+            </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-gray-600">&copy; 2026 EnterpriseKit. All rights reserved.</p>
+            <div class="flex gap-4">
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+</button>
+</div>
+
+
+    <script src="js/landing.js"></script>
diff --git a/Pages/Pages/landing3.cshtml b/Pages/Pages/landing3.cshtml
new file mode 100644
index 0000000..413acf2
--- /dev/null
+++ b/Pages/Pages/landing3.cshtml
@@ -0,0 +1,251 @@
+@page "/landing3"
+@{
+    ViewData["Title"] = "Landing 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:landing3.css"] = "css/landing3.css";
+    ViewData["Js:landing.js"] = "js/landing.js";
+
+}
+
+<div x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
+
+<nav class="sticky top-0 z-50 bg-blue-600" x-data="{ mobileOpen: false }">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+            <div class="flex items-center gap-10">
+                <a class="flex items-center gap-2 text-white font-bold text-lg no-underline" href="#">
+                    <svg class="w-7 h-7 text-white/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <span>EnterpriseKit</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a class="nav-link active" href="#home">Home</a>
+                    <a class="nav-link" href="#tech">Technologies</a>
+                    <a class="nav-link" href="#arch">Architecture</a>
+                    <a class="nav-link" href="#frontend">Frontend</a>
+                    <a class="nav-link" href="#cta">Get Started</a>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-3">
+                <a class="nav-link" href="#">Sign In</a>
+                <button class="btn-primary">Get Started</button>
+            </div>
+            <button class="md:hidden p-2 text-white/80 hover:text-white" @@click="mobileOpen = !mobileOpen">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </button>
+        </div>
+        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
+            <a class="block px-3 py-2 text-sm text-white bg-blue-500 rounded-md" href="#home">Home</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-md" href="#tech">Technologies</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-md" href="#arch">Architecture</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-md" href="#frontend">Frontend</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-md" href="#cta">Get Started</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-md" href="#">Sign In</a>
+            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
+        </div>
+    </div>
+</nav>
+
+<section id="home" class="relative bg-blue-600 overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 pointer-events-none"></div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="hero-badge mx-auto mb-6">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Built with .NET 10 & ASP.NET Core
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-tight tracking-tight">
+                Build Enterprise Apps<br/>
+                <span class="text-blue-200">Faster Than Ever</span>
+            </h1>
+            <p class="mt-6 text-lg md:text-xl text-blue-100 max-w-2xl mx-auto leading-relaxed">
+                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
+                Multitenant, multibranch, and ready for the cloud.
+            </p>
+            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+                <button class="btn-primary text-base px-8 py-3.5">
+                    Start Building
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </button>
+                <button class="btn-outline text-base px-8 py-3.5">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Watch Demo
+                </button>
+            </div>
+            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-blue-200">
+                <span class="font-medium text-blue-100">Trusted by</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> Enterprise Ready</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="tech" class="py-20 md:py-28">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">TECHNOLOGY STACK</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">MVC</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# 14</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
+        </div>
+    </div>
+</section>
+
+<section id="arch" class="py-20 md:py-28 bg-gray-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">ARCHITECTURE</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Multitenant & Multibranch</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
+            </div>
+            <div class="p-6 bg-white rounded-xl border border-gray-100 hover:shadow-sm transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="frontend" class="py-20 md:py-28">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">FRONTEND</span>
+                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
+                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
+                <div class="mt-8 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
+                <div class="p-5 bg-gray-50 rounded-xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="cta" class="py-20 md:py-28 bg-gray-900 text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold">Ready to Build?</h2>
+        <p class="mt-4 text-gray-400 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
+        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition text-sm">Get Started Free</button>
+        </div>
+    </div>
+</section>
+
+<footer class="bg-gray-900 border-t border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
+            <div>
+                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
+                    <svg class="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Platform</h4>
+                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Features</h4>
+                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Resources</h4>
+                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</a></div>
+            </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-gray-600">&copy; 2026 EnterpriseKit. All rights reserved.</p>
+            <div class="flex gap-4">
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+</button>
+</div>
+
+
+    <script src="js/landing.js"></script>
diff --git a/Pages/Pages/landing4.cshtml b/Pages/Pages/landing4.cshtml
new file mode 100644
index 0000000..a527bbd
--- /dev/null
+++ b/Pages/Pages/landing4.cshtml
@@ -0,0 +1,251 @@
+@page "/landing4"
+@{
+    ViewData["Title"] = "Landing 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:landing4.css"] = "css/landing4.css";
+    ViewData["Js:landing.js"] = "js/landing.js";
+
+}
+
+<div x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
+
+<nav class="sticky top-4 z-50 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" x-data="{ mobileOpen: false }">
+    <div class="bg-blue-600 rounded-2xl shadow-lg shadow-blue-600/20 px-4 sm:px-8">
+        <div class="flex items-center justify-between h-16">
+            <div class="flex items-center gap-10">
+                <a class="flex items-center gap-2 text-white font-bold text-lg no-underline" href="#">
+                    <svg class="w-7 h-7 text-white/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <span>EnterpriseKit</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a class="nav-link active" href="#home">Home</a>
+                    <a class="nav-link" href="#tech">Technologies</a>
+                    <a class="nav-link" href="#arch">Architecture</a>
+                    <a class="nav-link" href="#frontend">Frontend</a>
+                    <a class="nav-link" href="#cta">Get Started</a>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-3">
+                <a class="nav-link" href="#">Sign In</a>
+                <button class="btn-primary">Get Started</button>
+            </div>
+            <button class="md:hidden p-2 text-white/80 hover:text-white" @@click="mobileOpen = !mobileOpen">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </button>
+        </div>
+        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-2">
+            <a class="block px-3 py-2 text-sm text-white bg-blue-500 rounded-lg" href="#home">Home</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-lg" href="#tech">Technologies</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-lg" href="#arch">Architecture</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-lg" href="#frontend">Frontend</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-lg" href="#cta">Get Started</a>
+            <a class="block px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-blue-500 rounded-lg" href="#">Sign In</a>
+            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
+        </div>
+    </div>
+</nav>
+
+<section id="home" class="relative overflow-hidden pt-8">
+    <div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 to-transparent pointer-events-none"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24 md:pt-24 md:pb-32">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="hero-badge blue-themed mx-auto mb-6" style="background:#eff6ff;border-color:#bfdbfe;color:#2563eb;">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Built with .NET 10 & ASP.NET Core
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
+                Build Enterprise Apps<br/>
+                <span class="text-blue-600">Faster Than Ever</span>
+            </h1>
+            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
+                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
+                Multitenant, multibranch, and ready for the cloud.
+            </p>
+            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+                <button class="btn-primary text-base px-8 py-3.5" style="background:#2563eb;color:#fff;border-radius:9999px;">
+                    Start Building
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </button>
+                <button class="btn-outline text-base px-8 py-3.5" style="color:#2563eb;border-color:#bfdbfe;border-radius:9999px;">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Watch Demo
+                </button>
+            </div>
+            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
+                <span class="font-medium text-gray-500">Trusted by</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> Enterprise Ready</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="tech" class="py-20 md:py-28">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-4 py-1.5 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">TECHNOLOGY STACK</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">MVC</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# 14</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
+        </div>
+    </div>
+</section>
+
+<section id="arch" class="py-20 md:py-28 bg-gray-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+            <span class="inline-flex items-center gap-1.5 px-4 py-1.5 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">ARCHITECTURE</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
+            </div>
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
+            </div>
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Multitenant & Multibranch</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
+            </div>
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
+            </div>
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
+            </div>
+            <div class="p-6 bg-white rounded-2xl border border-gray-100 hover:shadow-lg transition-shadow">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="frontend" class="py-20 md:py-28">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <span class="inline-flex items-center gap-1.5 px-4 py-1.5 bg-blue-50 text-blue-600 text-xs font-semibold rounded-full border border-blue-100">FRONTEND</span>
+                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
+                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
+                <div class="mt-8 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
+                <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
+                <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
+                <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100"><div class="text-2xl font-bold text-blue-600">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="cta" class="py-20 md:py-28 bg-gray-900 text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold">Ready to Build?</h2>
+        <p class="mt-4 text-gray-400 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
+        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-semibold rounded-full hover:bg-blue-700 transition text-sm">Get Started Free</button>
+        </div>
+    </div>
+</section>
+
+<footer class="bg-gray-900 border-t border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
+            <div>
+                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
+                    <svg class="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Platform</h4>
+                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Features</h4>
+                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Resources</h4>
+                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</a></div>
+            </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-gray-600">&copy; 2026 EnterpriseKit. All rights reserved.</p>
+            <div class="flex gap-4">
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+</button>
+</div>
+
+
+    <script src="js/landing.js"></script>
diff --git a/Pages/Pages/landing5.cshtml b/Pages/Pages/landing5.cshtml
new file mode 100644
index 0000000..3e792b5
--- /dev/null
+++ b/Pages/Pages/landing5.cshtml
@@ -0,0 +1,250 @@
+@page "/landing5"
+@{
+    ViewData["Title"] = "Landing 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:landing5.css"] = "css/landing5.css";
+    ViewData["Js:landing.js"] = "js/landing.js";
+
+}
+
+<div x-data="{ atTop: true, activeSection: 'home' }" x-init="initScrollSpy(); window.addEventListener('scroll', () => { atTop = window.scrollY < 300; })">
+
+<nav class="sticky top-0 z-50 bg-white border-b border-gray-200" x-data="{ mobileOpen: false }">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-14">
+            <div class="flex items-center gap-10">
+                <a class="flex items-center gap-2 text-blue-600 font-bold text-lg no-underline" href="#">
+                    <svg class="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    <span>EnterpriseKit</span>
+                </a>
+                <div class="hidden md:flex items-center">
+                    <a class="nav-link active px-3 py-1.5" href="#home">Home</a>
+                    <a class="nav-link px-3 py-1.5" href="#tech">Technologies</a>
+                    <a class="nav-link px-3 py-1.5" href="#arch">Architecture</a>
+                    <a class="nav-link px-3 py-1.5" href="#frontend">Frontend</a>
+                    <a class="nav-link px-3 py-1.5" href="#cta">Get Started</a>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-3">
+                <a class="nav-link px-3 py-1.5" href="#">Sign In</a>
+                <button class="btn-primary">Get Started</button>
+            </div>
+            <button class="md:hidden p-2 text-blue-500 hover:text-blue-700" @@click="mobileOpen = !mobileOpen">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </button>
+        </div>
+        <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-1">
+            <a class="block px-3 py-2 text-sm text-blue-600 bg-blue-50 font-medium" href="#home">Home</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50" href="#tech">Technologies</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50" href="#arch">Architecture</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50" href="#frontend">Frontend</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50" href="#cta">Get Started</a>
+            <a class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50" href="#">Sign In</a>
+            <button class="btn-primary w-full justify-center mt-2">Get Started</button>
+        </div>
+    </div>
+</nav>
+
+<section id="home" class="relative bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 md:pt-24 md:pb-28">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="hero-badge mx-auto mb-6">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                Built with .NET 10 & ASP.NET Core
+            </div>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight tracking-tight">
+                Build Enterprise Apps<br/>
+                <span class="text-blue-600">Faster Than Ever</span>
+            </h1>
+            <p class="mt-6 text-lg md:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
+                A modern, modular application platform powered by ASP.NET Core, Blazor, and Vertical Slice Architecture.
+                Multitenant, multibranch, and ready for the cloud.
+            </p>
+            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
+                <button class="btn-primary text-base px-8 py-3">
+                    Start Building
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </button>
+                <button class="btn-outline text-base px-8 py-3">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    Watch Demo
+                </button>
+            </div>
+            <div class="mt-16 flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
+                <span class="font-medium text-gray-500">Trusted by</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg> Enterprise Ready</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg> Cloud Native</span>
+                <span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> SSO Ready</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="tech" class="py-16 md:py-24 bg-white border-t border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-14">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold border border-blue-100">TECHNOLOGY STACK</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Built on Modern .NET</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">From backend to frontend, every layer is crafted with the latest Microsoft technologies.</p>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">ASP.NET Core</div><div class="text-xs text-gray-400 mt-0.5">Framework</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/></svg></div><div class="font-semibold text-gray-900 text-sm">Blazor</div><div class="text-xs text-gray-400 mt-0.5">Web UI</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Razor Pages</div><div class="text-xs text-gray-400 mt-0.5">Pages</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">MVC</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg></div><div class="font-semibold text-gray-900 text-sm">.NET 10</div><div class="text-xs text-gray-400 mt-0.5">Runtime</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">EF Core</div><div class="text-xs text-gray-400 mt-0.5">ORM</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg></div><div class="font-semibold text-gray-900 text-sm">MS SQL</div><div class="text-xs text-gray-400 mt-0.5">Database</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg></div><div class="font-semibold text-gray-900 text-sm">C# 14</div><div class="text-xs text-gray-400 mt-0.5">Language</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg></div><div class="font-semibold text-gray-900 text-sm">CQRS</div><div class="text-xs text-gray-400 mt-0.5">Pattern</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div><div class="font-semibold text-gray-900 text-sm">MediatR</div><div class="text-xs text-gray-400 mt-0.5">CQRS</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div><div class="font-semibold text-gray-900 text-sm">AutoMapper</div><div class="text-xs text-gray-400 mt-0.5">Mapping</div></div>
+            <div class="tech-card"><div class="ico"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg></div><div class="font-semibold text-gray-900 text-sm">Minimal API</div><div class="text-xs text-gray-400 mt-0.5">APIs</div></div>
+        </div>
+    </div>
+</section>
+
+<section id="arch" class="py-16 md:py-24 bg-gray-100 border-t border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-14">
+            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold border border-blue-100">ARCHITECTURE</span>
+            <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Clean Architecture. Modern Patterns.</h2>
+            <p class="mt-4 text-gray-500 max-w-2xl mx-auto">Designed for scalability, maintainability, and separation of concerns.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Vertical Slice Architecture</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Feature-first organization. Each use case is an independent slice with its own commands, queries, handlers, and validation.</p>
+            </div>
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">CQRS with MediatR</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Commands and queries separated at the protocol level. MediatR handles pipeline behaviors for logging, validation, and caching.</p>
+            </div>
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Multitenant & Multibranch</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Built-in tenant isolation and branch management. Deploy multiple versions side by side with zero data leakage.</p>
+            </div>
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Firebase SSO</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Secure single sign-on with Firebase Authentication. Supports Google, Microsoft, email/password, and custom tokens out of the box.</p>
+            </div>
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">EF Core & MS SQL</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Entity Framework Core with SQL Server. Migrations, eager loading, value conversions, and raw SQL when you need it.</p>
+            </div>
+            <div class="p-6 bg-white border border-gray-200 box-shadow-hover">
+                <div class="feature-icon mb-4">
+                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900">Minimal APIs</h3>
+                <p class="mt-2 text-sm text-gray-500 leading-relaxed">Lightweight HTTP APIs with minimal ceremony. Perfect for microservices, BFF patterns, and integration endpoints.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="frontend" class="py-16 md:py-24 bg-white border-t border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 text-xs font-semibold border border-blue-100">FRONTEND</span>
+                <h2 class="mt-4 text-3xl sm:text-4xl font-bold text-gray-900">Modern Web UI Stack</h2>
+                <p class="mt-4 text-gray-500 leading-relaxed">Combining the power of Tailwind CSS for utility-first styling, AlpineJS for reactive components, and ChartJS for beautiful dashboards.</p>
+                <div class="mt-8 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Tailwind CSS</span><p class="text-xs text-gray-400 mt-0.5">Utility-first responsive design with custom themes</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">AlpineJS</span><p class="text-xs text-gray-400 mt-0.5">Lightweight reactive JavaScript framework</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">ChartJS</span><p class="text-xs text-gray-400 mt-0.5">Interactive charts and data visualization</p></div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                        <div><span class="font-semibold text-gray-900 text-sm">Blazor / Razor Pages / MVC</span><p class="text-xs text-gray-400 mt-0.5">Full-stack .NET web UI with C#</p></div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-3">
+                <div class="p-5 bg-gray-50 border border-gray-200"><div class="text-2xl font-bold text-blue-600">HTML</div><div class="text-xs text-gray-400 mt-1">Semantic Markup</div></div>
+                <div class="p-5 bg-gray-50 border border-gray-200"><div class="text-2xl font-bold text-blue-600">Tailwind</div><div class="text-xs text-gray-400 mt-1">CSS Framework</div></div>
+                <div class="p-5 bg-gray-50 border border-gray-200"><div class="text-2xl font-bold text-blue-600">AlpineJS</div><div class="text-xs text-gray-400 mt-1">Reactive UI</div></div>
+                <div class="p-5 bg-gray-50 border border-gray-200"><div class="text-2xl font-bold text-blue-600">ChartJS</div><div class="text-xs text-gray-400 mt-1">Data Viz</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="cta" class="py-16 md:py-24 bg-blue-600 text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold">Ready to Build?</h2>
+        <p class="mt-4 text-blue-100 max-w-xl mx-auto">Start your next enterprise application with a rock-solid foundation. Well documented, and production ready.</p>
+        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
+            <button class="inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-600 font-semibold hover:bg-blue-50 transition text-sm">Get Started Free</button>
+        </div>
+    </div>
+</section>
+
+<footer class="bg-gray-900 border-t border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
+            <div>
+                <div class="flex items-center gap-2 text-white font-bold text-lg mb-4">
+                    <svg class="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                    EnterpriseKit
+                </div>
+                <p class="text-sm text-gray-500 leading-relaxed">Enterprise application platform built on .NET 10. Modern, modular, and multitenant.</p>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Platform</h4>
+                <div class="space-y-2"><a class="footer-link block">ASP.NET Core</a><a class="footer-link block">Blazor</a><a class="footer-link block">Minimal API</a><a class="footer-link block">EF Core</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Features</h4>
+                <div class="space-y-2"><a class="footer-link block">Multitenant</a><a class="footer-link block">Multibranch</a><a class="footer-link block">Firebase SSO</a><a class="footer-link block">CQRS</a></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-semibold text-blue-400 uppercase tracking-wider mb-4">Resources</h4>
+                <div class="space-y-2"><a class="footer-link block">Documentation</a><a class="footer-link block">API Reference</a><a class="footer-link block">GitHub</a><a class="footer-link block">Contact</a></div>
+            </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-xs text-gray-600">&copy; 2026 EnterpriseKit. All rights reserved.</p>
+            <div class="flex gap-4">
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Privacy</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Terms</a>
+                <a class="text-gray-500 hover:text-gray-300 transition text-xs cursor-pointer">Cookies</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<button id="fab-top" :class="atTop ? '' : 'show'" @@click="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+</button>
+</div>
+
+
+    <script src="js/landing.js"></script>
diff --git a/Pages/Pages/notfound1.cshtml b/Pages/Pages/notfound1.cshtml
new file mode 100644
index 0000000..bff0e96
--- /dev/null
+++ b/Pages/Pages/notfound1.cshtml
@@ -0,0 +1,19 @@
+@page "/notfound1"
+@{
+    ViewData["Title"] = "Not Found 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">404</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Not Found</h1>
+                <p class="text-gray-500 mt-2">The page you are looking for does not exist.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/notfound2.cshtml b/Pages/Pages/notfound2.cshtml
new file mode 100644
index 0000000..4d5cacf
--- /dev/null
+++ b/Pages/Pages/notfound2.cshtml
@@ -0,0 +1,19 @@
+@page "/notfound2"
+@{
+    ViewData["Title"] = "Not Found 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">404</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Not Found</h1>
+                <p class="text-gray-500 mt-2">The page you are looking for does not exist.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/notfound3.cshtml b/Pages/Pages/notfound3.cshtml
new file mode 100644
index 0000000..b4b5fd4
--- /dev/null
+++ b/Pages/Pages/notfound3.cshtml
@@ -0,0 +1,19 @@
+@page "/notfound3"
+@{
+    ViewData["Title"] = "Not Found 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">404</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Not Found</h1>
+                <p class="text-gray-500 mt-2">The page you are looking for does not exist.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/notfound4.cshtml b/Pages/Pages/notfound4.cshtml
new file mode 100644
index 0000000..d893b85
--- /dev/null
+++ b/Pages/Pages/notfound4.cshtml
@@ -0,0 +1,19 @@
+@page "/notfound4"
+@{
+    ViewData["Title"] = "Not Found 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">404</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Not Found</h1>
+                <p class="text-gray-500 mt-2">The page you are looking for does not exist.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/notfound5.cshtml b/Pages/Pages/notfound5.cshtml
new file mode 100644
index 0000000..7d193ac
--- /dev/null
+++ b/Pages/Pages/notfound5.cshtml
@@ -0,0 +1,19 @@
+@page "/notfound5"
+@{
+    ViewData["Title"] = "Not Found 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">404</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Not Found</h1>
+                <p class="text-gray-500 mt-2">The page you are looking for does not exist.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/toomany1.cshtml b/Pages/Pages/toomany1.cshtml
new file mode 100644
index 0000000..e1cbe64
--- /dev/null
+++ b/Pages/Pages/toomany1.cshtml
@@ -0,0 +1,19 @@
+@page "/toomany1"
+@{
+    ViewData["Title"] = "Too Many 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">429</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Too Many Requests</h1>
+                <p class="text-gray-500 mt-2">You have sent too many requests in a given amount of time.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/toomany2.cshtml b/Pages/Pages/toomany2.cshtml
new file mode 100644
index 0000000..854e133
--- /dev/null
+++ b/Pages/Pages/toomany2.cshtml
@@ -0,0 +1,19 @@
+@page "/toomany2"
+@{
+    ViewData["Title"] = "Too Many 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">429</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Too Many Requests</h1>
+                <p class="text-gray-500 mt-2">You have sent too many requests in a given amount of time.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/toomany3.cshtml b/Pages/Pages/toomany3.cshtml
new file mode 100644
index 0000000..45f5d3f
--- /dev/null
+++ b/Pages/Pages/toomany3.cshtml
@@ -0,0 +1,19 @@
+@page "/toomany3"
+@{
+    ViewData["Title"] = "Too Many 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">429</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Too Many Requests</h1>
+                <p class="text-gray-500 mt-2">You have sent too many requests in a given amount of time.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/toomany4.cshtml b/Pages/Pages/toomany4.cshtml
new file mode 100644
index 0000000..0c3d135
--- /dev/null
+++ b/Pages/Pages/toomany4.cshtml
@@ -0,0 +1,19 @@
+@page "/toomany4"
+@{
+    ViewData["Title"] = "Too Many 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">429</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Too Many Requests</h1>
+                <p class="text-gray-500 mt-2">You have sent too many requests in a given amount of time.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/toomany5.cshtml b/Pages/Pages/toomany5.cshtml
new file mode 100644
index 0000000..4d4bd6d
--- /dev/null
+++ b/Pages/Pages/toomany5.cshtml
@@ -0,0 +1,19 @@
+@page "/toomany5"
+@{
+    ViewData["Title"] = "Too Many 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">429</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Too Many Requests</h1>
+                <p class="text-gray-500 mt-2">You have sent too many requests in a given amount of time.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unauthorized1.cshtml b/Pages/Pages/unauthorized1.cshtml
new file mode 100644
index 0000000..4a76f62
--- /dev/null
+++ b/Pages/Pages/unauthorized1.cshtml
@@ -0,0 +1,19 @@
+@page "/unauthorized1"
+@{
+    ViewData["Title"] = "Unauthorized 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">401</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Unauthorized</h1>
+                <p class="text-gray-500 mt-2">You are not authorized to access this resource.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unauthorized2.cshtml b/Pages/Pages/unauthorized2.cshtml
new file mode 100644
index 0000000..c70b82e
--- /dev/null
+++ b/Pages/Pages/unauthorized2.cshtml
@@ -0,0 +1,19 @@
+@page "/unauthorized2"
+@{
+    ViewData["Title"] = "Unauthorized 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">401</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Unauthorized</h1>
+                <p class="text-gray-500 mt-2">You are not authorized to access this resource.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unauthorized3.cshtml b/Pages/Pages/unauthorized3.cshtml
new file mode 100644
index 0000000..e25d9ac
--- /dev/null
+++ b/Pages/Pages/unauthorized3.cshtml
@@ -0,0 +1,19 @@
+@page "/unauthorized3"
+@{
+    ViewData["Title"] = "Unauthorized 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">401</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Unauthorized</h1>
+                <p class="text-gray-500 mt-2">You are not authorized to access this resource.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unauthorized4.cshtml b/Pages/Pages/unauthorized4.cshtml
new file mode 100644
index 0000000..c25b185
--- /dev/null
+++ b/Pages/Pages/unauthorized4.cshtml
@@ -0,0 +1,19 @@
+@page "/unauthorized4"
+@{
+    ViewData["Title"] = "Unauthorized 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">401</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Unauthorized</h1>
+                <p class="text-gray-500 mt-2">You are not authorized to access this resource.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unauthorized5.cshtml b/Pages/Pages/unauthorized5.cshtml
new file mode 100644
index 0000000..10d54c3
--- /dev/null
+++ b/Pages/Pages/unauthorized5.cshtml
@@ -0,0 +1,19 @@
+@page "/unauthorized5"
+@{
+    ViewData["Title"] = "Unauthorized 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">401</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Unauthorized</h1>
+                <p class="text-gray-500 mt-2">You are not authorized to access this resource.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unavailable1.cshtml b/Pages/Pages/unavailable1.cshtml
new file mode 100644
index 0000000..6bd5066
--- /dev/null
+++ b/Pages/Pages/unavailable1.cshtml
@@ -0,0 +1,19 @@
+@page "/unavailable1"
+@{
+    ViewData["Title"] = "Unavailable 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">503</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Service Unavailable</h1>
+                <p class="text-gray-500 mt-2">The server is temporarily unable to handle the request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unavailable2.cshtml b/Pages/Pages/unavailable2.cshtml
new file mode 100644
index 0000000..489b930
--- /dev/null
+++ b/Pages/Pages/unavailable2.cshtml
@@ -0,0 +1,19 @@
+@page "/unavailable2"
+@{
+    ViewData["Title"] = "Unavailable 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">503</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Service Unavailable</h1>
+                <p class="text-gray-500 mt-2">The server is temporarily unable to handle the request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unavailable3.cshtml b/Pages/Pages/unavailable3.cshtml
new file mode 100644
index 0000000..7eb9ff8
--- /dev/null
+++ b/Pages/Pages/unavailable3.cshtml
@@ -0,0 +1,19 @@
+@page "/unavailable3"
+@{
+    ViewData["Title"] = "Unavailable 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">503</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Service Unavailable</h1>
+                <p class="text-gray-500 mt-2">The server is temporarily unable to handle the request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unavailable4.cshtml b/Pages/Pages/unavailable4.cshtml
new file mode 100644
index 0000000..da59018
--- /dev/null
+++ b/Pages/Pages/unavailable4.cshtml
@@ -0,0 +1,19 @@
+@page "/unavailable4"
+@{
+    ViewData["Title"] = "Unavailable 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">503</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Service Unavailable</h1>
+                <p class="text-gray-500 mt-2">The server is temporarily unable to handle the request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Pages/unavailable5.cshtml b/Pages/Pages/unavailable5.cshtml
new file mode 100644
index 0000000..dda699d
--- /dev/null
+++ b/Pages/Pages/unavailable5.cshtml
@@ -0,0 +1,19 @@
+@page "/unavailable5"
+@{
+    ViewData["Title"] = "Unavailable 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+}
+
+<div class="p-4 md:p-6 flex items-center justify-center" style="min-height: calc(100vh - 64px);">
+            <div class="text-center">
+                <p class="text-9xl font-bold text-gray-300">503</p>
+                <h1 class="text-4xl font-bold text-gray-800 mt-4">Service Unavailable</h1>
+                <p class="text-gray-500 mt-2">The server is temporarily unable to handle the request.</p>
+                <a href="#" x-on:click.prevent="aktif = 'crmdashboard'" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 text-sm font-semibold rounded-lg text-white transition" style="background: #3b82f6;">
+                    <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="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
+                    Go to Dashboard
+                </a>
+            </div>
+        </div>
diff --git a/Pages/Privacy.cshtml b/Pages/Privacy.cshtml
new file mode 100644
index 0000000..46ba966
--- /dev/null
+++ b/Pages/Privacy.cshtml
@@ -0,0 +1,8 @@
+@page
+@model PrivacyModel
+@{
+    ViewData["Title"] = "Privacy Policy";
+}
+<h1>@ViewData["Title"]</h1>
+
+<p>Use this page to detail your site's privacy policy.</p>
diff --git a/Pages/Privacy.cshtml.cs b/Pages/Privacy.cshtml.cs
new file mode 100644
index 0000000..69f64c0
--- /dev/null
+++ b/Pages/Privacy.cshtml.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Indotalent.Pages
+{
+    public class PrivacyModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+
+}
diff --git a/Pages/Security/confirmemail1.cshtml b/Pages/Security/confirmemail1.cshtml
new file mode 100644
index 0000000..9cf152a
--- /dev/null
+++ b/Pages/Security/confirmemail1.cshtml
@@ -0,0 +1,102 @@
+@page "/confirmemail1"
+@{
+    ViewData["Title"] = "Confirm Email 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Verification Complete</div>
+                        <div class="text-xs text-gray-400">Your email has been verified successfully</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
+            </div>
+
+            <div class="bg-white border border-gray-100 rounded-xl p-6 mb-6">
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Account Activated</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Email Verified</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
+                    </div>
+                </div>
+            </div>
+
+            <a href="/login1" class="btn-primary w-full">
+                Sign In to Your Account
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Need help?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/confirmemail2.cshtml b/Pages/Security/confirmemail2.cshtml
new file mode 100644
index 0000000..f57a58c
--- /dev/null
+++ b/Pages/Security/confirmemail2.cshtml
@@ -0,0 +1,102 @@
+@page "/confirmemail2"
+@{
+    ViewData["Title"] = "Confirm Email 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Verification Complete</div>
+                        <div class="text-xs text-gray-400">Your email has been verified successfully</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
+            </div>
+
+            <div class="bg-white border border-blue-100 rounded-xl p-6 mb-6 shadow-sm">
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Account Activated</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Email Verified</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
+                    </div>
+                </div>
+            </div>
+
+            <a href="/login2" class="btn-primary w-full">
+                Sign In to Your Account
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Need help?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/confirmemail3.cshtml b/Pages/Security/confirmemail3.cshtml
new file mode 100644
index 0000000..03d7c80
--- /dev/null
+++ b/Pages/Security/confirmemail3.cshtml
@@ -0,0 +1,102 @@
+@page "/confirmemail3"
+@{
+    ViewData["Title"] = "Confirm Email 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Account Active</span><p class="text-xs text-blue-200 mt-0.5">Your account is fully activated and ready to use</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Full Access Granted</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Ready to Go</span><p class="text-xs text-blue-200 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-xl backdrop-blur-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Verification Complete</div>
+                        <div class="text-xs text-blue-200">Your email has been verified successfully</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
+            </div>
+
+            <div class="bg-white border border-gray-100 rounded-xl p-6 mb-6">
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Account Activated</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Email Verified</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
+                    </div>
+                </div>
+            </div>
+
+            <a href="/login3" class="btn-primary w-full">
+                Sign In to Your Account
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Need help?
+                <a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/confirmemail4.cshtml b/Pages/Security/confirmemail4.cshtml
new file mode 100644
index 0000000..00e693f
--- /dev/null
+++ b/Pages/Security/confirmemail4.cshtml
@@ -0,0 +1,102 @@
+@page "/confirmemail4"
+@{
+    ViewData["Title"] = "Confirm Email 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex flex-row">
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
+            </div>
+
+            <div class="bg-white border border-gray-100 rounded-2xl p-6 mb-6">
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Account Activated</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Email Verified</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
+                    </div>
+                </div>
+            </div>
+
+            <a href="/login4" class="btn-primary w-full">
+                Sign In to Your Account
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Need help?
+                <a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/15 rounded-2xl flex items-center justify-center backdrop-blur-sm">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Account Active</span><p class="text-xs text-blue-200 mt-0.5">Your account is fully activated and ready to use</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Full Access Granted</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Ready to Go</span><p class="text-xs text-blue-200 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-2xl backdrop-blur-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Verification Complete</div>
+                        <div class="text-xs text-blue-200">Your email has been verified successfully</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/confirmemail5.cshtml b/Pages/Security/confirmemail5.cshtml
new file mode 100644
index 0000000..d89364d
--- /dev/null
+++ b/Pages/Security/confirmemail5.cshtml
@@ -0,0 +1,102 @@
+@page "/confirmemail5"
+@{
+    ViewData["Title"] = "Confirm Email 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex">
+    <div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Email Successfully<br/>Confirmed</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Your email has been verified and your account is now active. You can start exploring the full power of EnterpriseKit right away.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Account Active</span><p class="text-xs text-gray-400 mt-0.5">Your account is fully activated and ready to use</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Full Access Granted</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Ready to Go</span><p class="text-xs text-gray-400 mt-0.5">Sign in now to start managing your enterprise operations</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 box-card">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-50 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Verification Complete</div>
+                        <div class="text-xs text-gray-400">Your email has been verified successfully</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Thank You for Confirming!</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Your email address has been successfully verified and your account is now fully active. You can start using EnterpriseKit immediately.</p>
+            </div>
+
+            <div class="box-card p-6 mb-6">
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Account Activated</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your account is now active and ready for use</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3 mb-4">
+                    <div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Email Verified</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Your email address has been successfully verified</p>
+                    </div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-6 h-6 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <span class="font-semibold text-gray-900 text-sm">Ready to Explore</span>
+                        <p class="text-xs text-gray-400 mt-0.5">Sign in to access all EnterpriseKit features</p>
+                    </div>
+                </div>
+            </div>
+
+            <a href="/login5" class="btn-primary w-full">
+                Sign In to Your Account
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+            </a>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Need help?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/forgotpassword1.cshtml b/Pages/Security/forgotpassword1.cshtml
new file mode 100644
index 0000000..21c2629
--- /dev/null
+++ b/Pages/Security/forgotpassword1.cshtml
@@ -0,0 +1,124 @@
+@page "/forgotpassword1"
+@{
+    ViewData["Title"] = "Forgot Password 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
+                        <div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
+                <p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+                                Send Reset Link
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Sending reset link...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login1">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/forgotpassword2.cshtml b/Pages/Security/forgotpassword2.cshtml
new file mode 100644
index 0000000..3b50646
--- /dev/null
+++ b/Pages/Security/forgotpassword2.cshtml
@@ -0,0 +1,124 @@
+@page "/forgotpassword2"
+@{
+    ViewData["Title"] = "Forgot Password 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
+                        <div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
+                <p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+                                Send Reset Link
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Sending reset link...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login2">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/forgotpassword3.cshtml b/Pages/Security/forgotpassword3.cshtml
new file mode 100644
index 0000000..0998d32
--- /dev/null
+++ b/Pages/Security/forgotpassword3.cshtml
@@ -0,0 +1,124 @@
+@page "/forgotpassword3"
+@{
+    ViewData["Title"] = "Forgot Password 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Reset Your<br/>Account Password</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Quick & Secure</span><p class="text-xs text-blue-200 mt-0.5">Reset your password in just a few minutes</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">End-to-end encrypted password reset process</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Contact our support team if you need help</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Your Data is Safe</div>
+                        <div class="text-xs text-blue-200">All password resets are encrypted and verified</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-white">Forgot Password?</h2>
+                <p class="text-blue-100 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+                                Send Reset Link
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Sending reset link...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login3">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/forgotpassword4.cshtml b/Pages/Security/forgotpassword4.cshtml
new file mode 100644
index 0000000..9a1155f
--- /dev/null
+++ b/Pages/Security/forgotpassword4.cshtml
@@ -0,0 +1,124 @@
+@page "/forgotpassword4"
+@{
+    ViewData["Title"] = "Forgot Password 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex flex-row-reverse bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Reset Your<br/>Account Password</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Quick & Secure</span><p class="text-xs text-blue-200 mt-0.5">Reset your password in just a few minutes</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">End-to-end encrypted password reset process</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Contact our support team if you need help</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Your Data is Safe</div>
+                        <div class="text-xs text-blue-200">All password resets are encrypted and verified</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-white">Forgot Password?</h2>
+                <p class="text-blue-100 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+                                Send Reset Link
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Sending reset link...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login4">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/forgotpassword5.cshtml b/Pages/Security/forgotpassword5.cshtml
new file mode 100644
index 0000000..56420f4
--- /dev/null
+++ b/Pages/Security/forgotpassword5.cshtml
@@ -0,0 +1,124 @@
+@page "/forgotpassword5"
+@{
+    ViewData["Title"] = "Forgot Password 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex bg-white" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gray-50 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Reset Your<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter your registered email address and we'll send you a secure link to reset your password. The link will expire in 24 hours for your security.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick & Secure</span><p class="text-xs text-gray-400 mt-0.5">Reset your password in just a few minutes</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">End-to-end encrypted password reset process</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Contact our support team if you need help</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-200">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Your Data is Safe</div>
+                        <div class="text-xs text-gray-400">All password resets are encrypted and verified</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Forgot Password?</h2>
+                <p class="text-gray-500 text-sm mt-1">No worries. Enter your email and we'll send you a reset link.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('email').value.trim()) { errors.email = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Reset link sent! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+                                Send Reset Link
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Sending reset link...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login5">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/login1.cshtml b/Pages/Security/login1.cshtml
new file mode 100644
index 0000000..45e09b7
--- /dev/null
+++ b/Pages/Security/login1.cshtml
@@ -0,0 +1,145 @@
+@page "/login1"
+@{
+    ViewData["Title"] = "Login 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' } }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
+                        <div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
+            </div>
+
+            <form @@submit.prevent="
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
+                    setTimeout(() => { notification.show = false; }, 4000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required>
+                    </div>
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="form-label mb-0" for="password">Password</label>
+                            <a class="text-link text-xs" href="/forgotpassword1">Forgot password?</a>
+                        </div>
+                        <input class="input-field" id="password" type="password" placeholder="Enter your password" required>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="checkbox-custom" id="remember" type="checkbox">
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Sign In
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Signing in...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="divider"><span>Or continue with</span></div>
+
+            <div class="space-y-3">
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                    Sign in with Google
+                </button>
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
+                    Sign in with Facebook
+                </button>
+            </div>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't have an account?
+                <a class="auth-link ml-1" href="/register1">Create one</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/login2.cshtml b/Pages/Security/login2.cshtml
new file mode 100644
index 0000000..8d062fb
--- /dev/null
+++ b/Pages/Security/login2.cshtml
@@ -0,0 +1,144 @@
+@page "/login2"
+@{
+    ViewData["Title"] = "Login 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' } }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
+                        <div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
+            </div>
+
+            <form @@submit.prevent="
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
+                    setTimeout(() => { notification.show = false; }, 4000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required>
+                    </div>
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="form-label mb-0" for="password">Password</label>
+                            <a class="text-link text-xs" href="/forgotpassword2">Forgot password?</a>
+                        </div>
+                        <input class="input-field" id="password" type="password" placeholder="Enter your password" required>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="checkbox-custom" id="remember" type="checkbox">
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Sign In
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Signing in...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="divider"><span>Or continue with</span></div>
+
+            <div class="space-y-3">
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                    Sign in with Google
+                </button>
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
+                    Sign in with Facebook
+                </button>
+            </div>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't have an account?
+                <a class="auth-link ml-1" href="/register2">Create one</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/login3.cshtml b/Pages/Security/login3.cshtml
new file mode 100644
index 0000000..dedc08f
--- /dev/null
+++ b/Pages/Security/login3.cshtml
@@ -0,0 +1,144 @@
+@page "/login3"
+@{
+    ViewData["Title"] = "Login 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' } }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md text-white">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Multi-Module Access</span><p class="text-xs text-blue-200 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Real-Time Analytics</span><p class="text-xs text-blue-200 mt-0.5">Live dashboards with ChartJS visualization</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">SSO, MFA, and role-based access control</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">24/7 Enterprise Support</div>
+                        <div class="text-xs text-blue-200">Dedicated support team available around the clock</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
+            </div>
+
+            <form @@submit.prevent="
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
+                    setTimeout(() => { notification.show = false; }, 4000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required>
+                    </div>
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="form-label mb-0" for="password">Password</label>
+                            <a class="text-link text-xs" href="/forgotpassword3">Forgot password?</a>
+                        </div>
+                        <input class="input-field" id="password" type="password" placeholder="Enter your password" required>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="checkbox-custom" id="remember" type="checkbox">
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Sign In
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Signing in...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="divider"><span>Or continue with</span></div>
+
+            <div class="space-y-3">
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                    Sign in with Google
+                </button>
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
+                    Sign in with Facebook
+                </button>
+            </div>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't have an account?
+                <a class="auth-link ml-1" href="/register3">Create one</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/login4.cshtml b/Pages/Security/login4.cshtml
new file mode 100644
index 0000000..5da6922
--- /dev/null
+++ b/Pages/Security/login4.cshtml
@@ -0,0 +1,144 @@
+@page "/login4"
+@{
+    ViewData["Title"] = "Login 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' } }">
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
+            </div>
+
+            <form @@submit.prevent="
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
+                    setTimeout(() => { notification.show = false; }, 4000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required>
+                    </div>
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="form-label mb-0" for="password">Password</label>
+                            <a class="text-link text-xs" href="/forgotpassword4">Forgot password?</a>
+                        </div>
+                        <input class="input-field" id="password" type="password" placeholder="Enter your password" required>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="checkbox-custom" id="remember" type="checkbox">
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Sign In
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Signing in...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="divider"><span>Or continue with</span></div>
+
+            <div class="space-y-3">
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                    Sign in with Google
+                </button>
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
+                    Sign in with Facebook
+                </button>
+            </div>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't have an account?
+                <a class="auth-link ml-1" href="/register4">Create one</a>
+            </p>
+        </div>
+    </div>
+
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md text-white">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center backdrop-blur">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Multi-Module Access</span><p class="text-xs text-blue-200 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Real-Time Analytics</span><p class="text-xs text-blue-200 mt-0.5">Live dashboards with ChartJS visualization</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Enterprise Security</span><p class="text-xs text-blue-200 mt-0.5">SSO, MFA, and role-based access control</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-2xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">24/7 Enterprise Support</div>
+                        <div class="text-xs text-blue-200">Dedicated support team available around the clock</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/login5.cshtml b/Pages/Security/login5.cshtml
new file mode 100644
index 0000000..4478df6
--- /dev/null
+++ b/Pages/Security/login5.cshtml
@@ -0,0 +1,144 @@
+@page "/login5"
+@{
+    ViewData["Title"] = "Login 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' } }">
+    <div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Welcome Back to<br/>Your Enterprise Hub</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Sign in to access your dashboard, manage your applications, and collaborate with your team across all your enterprise modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multi-Module Access</span><p class="text-xs text-gray-400 mt-0.5">CRM, HRM, WMS, TMS, ITSM and more</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Real-Time Analytics</span><p class="text-xs text-gray-400 mt-0.5">Live dashboards with ChartJS visualization</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Enterprise Security</span><p class="text-xs text-gray-400 mt-0.5">SSO, MFA, and role-based access control</p></div>
+                </div>
+            </div>
+            <div class="mt-10 feature-box">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">24/7 Enterprise Support</div>
+                        <div class="text-xs text-gray-400">Dedicated support team available around the clock</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Sign In</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your credentials to access your account</p>
+            </div>
+
+            <form @@submit.prevent="
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Welcome back! You have been signed in successfully.' };
+                    setTimeout(() => { notification.show = false; }, 4000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required>
+                    </div>
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <label class="form-label mb-0" for="password">Password</label>
+                            <a class="text-link text-xs" href="/forgotpassword5">Forgot password?</a>
+                        </div>
+                        <input class="input-field" id="password" type="password" placeholder="Enter your password" required>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="checkbox-custom" id="remember" type="checkbox">
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="remember">Remember me</label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Sign In
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Signing in...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="divider"><span>Or continue with</span></div>
+
+            <div class="space-y-3">
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                    Sign in with Google
+                </button>
+                <button class="btn-outline" type="button">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
+                    Sign in with Facebook
+                </button>
+            </div>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't have an account?
+                <a class="auth-link ml-1" href="/register5">Create one</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/logout1.cshtml b/Pages/Security/logout1.cshtml
new file mode 100644
index 0000000..f9f8e75
--- /dev/null
+++ b/Pages/Security/logout1.cshtml
@@ -0,0 +1,117 @@
+@page "/logout1"
+@{
+    ViewData["Title"] = "Logout 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Secure by Default</div>
+                        <div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Logout</h2>
+                <p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
+            </div>
+
+            <div class="space-y-3">
+                <button class="btn-primary" type="button" @@click="
+                    loading = true;
+                    logoutSuccess = false;
+                    setTimeout(() => {
+                        loading = false;
+                        logoutSuccess = true;
+                        notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
+                        setTimeout(() => { notification.show = false; }, 4000);
+                    }, 3000);
+                " :disabled="loading">
+                    <template x-if="!loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
+                            Logout
+                        </span>
+                    </template>
+                    <template x-if="loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                            Logging out...
+                        </span>
+                    </template>
+                </button>
+                <a href="/dashboard1" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
+                    <span class="flex items-center gap-2 justify-center">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
+                        Cancel
+                    </span>
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Logout Successful</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/logout2.cshtml b/Pages/Security/logout2.cshtml
new file mode 100644
index 0000000..425384d
--- /dev/null
+++ b/Pages/Security/logout2.cshtml
@@ -0,0 +1,117 @@
+@page "/logout2"
+@{
+    ViewData["Title"] = "Logout 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-50 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-blue-50/30 border border-blue-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Secure by Default</div>
+                        <div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Logout</h2>
+                <p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
+            </div>
+
+            <div class="space-y-3">
+                <button class="btn-primary" type="button" @@click="
+                    loading = true;
+                    logoutSuccess = false;
+                    setTimeout(() => {
+                        loading = false;
+                        logoutSuccess = true;
+                        notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
+                        setTimeout(() => { notification.show = false; }, 4000);
+                    }, 3000);
+                " :disabled="loading">
+                    <template x-if="!loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
+                            Logout
+                        </span>
+                    </template>
+                    <template x-if="loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                            Logging out...
+                        </span>
+                    </template>
+                </button>
+                <a href="/dashboard2" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
+                    <span class="flex items-center gap-2 justify-center">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
+                        Cancel
+                    </span>
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg shadow-blue-100/30 rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Logout Successful</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/logout3.cshtml b/Pages/Security/logout3.cshtml
new file mode 100644
index 0000000..04501f5
--- /dev/null
+++ b/Pages/Security/logout3.cshtml
@@ -0,0 +1,117 @@
+@page "/logout3"
+@{
+    ViewData["Title"] = "Logout 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/10">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Secure<br/>Session Logout</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure Session Termination</span><p class="text-xs text-blue-200 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Data Protection</span><p class="text-xs text-blue-200 mt-0.5">Your data remains encrypted and protected after logout</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Quick Re-Access</span><p class="text-xs text-blue-200 mt-0.5">Sign back in anytime with your credentials</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Secure by Default</div>
+                        <div class="text-xs text-blue-200">All sessions are encrypted with enterprise-grade security</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Logout</h2>
+                <p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
+            </div>
+
+            <div class="space-y-3">
+                <button class="btn-primary" type="button" @@click="
+                    loading = true;
+                    logoutSuccess = false;
+                    setTimeout(() => {
+                        loading = false;
+                        logoutSuccess = true;
+                        notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
+                        setTimeout(() => { notification.show = false; }, 4000);
+                    }, 3000);
+                " :disabled="loading">
+                    <template x-if="!loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
+                            Logout
+                        </span>
+                    </template>
+                    <template x-if="loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                            Logging out...
+                        </span>
+                    </template>
+                </button>
+                <a href="/dashboard3" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
+                    <span class="flex items-center gap-2 justify-center">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
+                        Cancel
+                    </span>
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Logout Successful</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/logout4.cshtml b/Pages/Security/logout4.cshtml
new file mode 100644
index 0000000..988da14
--- /dev/null
+++ b/Pages/Security/logout4.cshtml
@@ -0,0 +1,117 @@
+@page "/logout4"
+@{
+    ViewData["Title"] = "Logout 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Logout</h2>
+                <p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
+            </div>
+
+            <div class="space-y-3">
+                <button class="btn-primary" type="button" @@click="
+                    loading = true;
+                    logoutSuccess = false;
+                    setTimeout(() => {
+                        loading = false;
+                        logoutSuccess = true;
+                        notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
+                        setTimeout(() => { notification.show = false; }, 4000);
+                    }, 3000);
+                " :disabled="loading">
+                    <template x-if="!loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
+                            Logout
+                        </span>
+                    </template>
+                    <template x-if="loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                            Logging out...
+                        </span>
+                    </template>
+                </button>
+                <a href="/dashboard4" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
+                    <span class="flex items-center gap-2 justify-center">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
+                        Cancel
+                    </span>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/10">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Secure<br/>Session Logout</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure Session Termination</span><p class="text-xs text-blue-200 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Data Protection</span><p class="text-xs text-blue-200 mt-0.5">Your data remains encrypted and protected after logout</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 border border-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Quick Re-Access</span><p class="text-xs text-blue-200 mt-0.5">Sign back in anytime with your credentials</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Secure by Default</div>
+                        <div class="text-xs text-blue-200">All sessions are encrypted with enterprise-grade security</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Logout Successful</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/logout5.cshtml b/Pages/Security/logout5.cshtml
new file mode 100644
index 0000000..4a452a0
--- /dev/null
+++ b/Pages/Security/logout5.cshtml
@@ -0,0 +1,117 @@
+@page "/logout5"
+@{
+    ViewData["Title"] = "Logout 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, logoutSuccess: false }">
+    <div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12 border-r border-gray-200">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Secure<br/>Session Logout</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">End your current session securely. All active sessions will be terminated and you will be redirected to the login page.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure Session Termination</span><p class="text-xs text-gray-400 mt-0.5">All tokens and sessions are invalidated immediately</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Data Protection</span><p class="text-xs text-gray-400 mt-0.5">Your data remains encrypted and protected after logout</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Quick Re-Access</span><p class="text-xs text-gray-400 mt-0.5">Sign back in anytime with your credentials</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-gray-50 border border-gray-200">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Secure by Default</div>
+                        <div class="text-xs text-gray-400">All sessions are encrypted with enterprise-grade security</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Logout</h2>
+                <p class="text-gray-500 text-sm mt-3 max-w-sm mx-auto">Are you sure you want to logout? Click below button to confirm.</p>
+            </div>
+
+            <div class="space-y-3">
+                <button class="btn-primary" type="button" @@click="
+                    loading = true;
+                    logoutSuccess = false;
+                    setTimeout(() => {
+                        loading = false;
+                        logoutSuccess = true;
+                        notification = { show: true, message: 'You have been logged out successfully. Redirecting to login page...' };
+                        setTimeout(() => { notification.show = false; }, 4000);
+                    }, 3000);
+                " :disabled="loading">
+                    <template x-if="!loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
+                            Logout
+                        </span>
+                    </template>
+                    <template x-if="loading">
+                        <span class="flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                            Logging out...
+                        </span>
+                    </template>
+                </button>
+                <a href="/dashboard5" class="btn-outline block text-center no-underline" :class="{ 'pointer-events-none opacity-50': loading }">
+                    <span class="flex items-center gap-2 justify-center">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
+                        Cancel
+                    </span>
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Logout Successful</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/multitenantselection1.cshtml b/Pages/Security/multitenantselection1.cshtml
new file mode 100644
index 0000000..6330bf1
--- /dev/null
+++ b/Pages/Security/multitenantselection1.cshtml
@@ -0,0 +1,172 @@
+@page "/multitenantselection1"
+@{
+    ViewData["Title"] = "Multi Tenant Selection 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Signed in as admin@company.com</div>
+                        <div class="text-xs text-gray-400">Choose a workspace to continue</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
+            </div>
+
+            <div class="space-y-4">
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
+                    <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                248 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
+                    <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                1,247 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
+                    <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                3,580 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template x-if="showNotification">
+                <div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
+                            <div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <button @@click="
+                if(loading) return;
+                if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notificationMessage = 'Tenant is ready, will be automatically redirected.';
+                    showNotification = true;
+                    setTimeout(() => showNotification = false, 3000);
+                }, 2000);
+            " :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
+                <template x-if="loading">
+                    <svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                </template>
+                <span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
+                <template x-if="!loading">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </template>
+            </button>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't see your workspace?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/multitenantselection2.cshtml b/Pages/Security/multitenantselection2.cshtml
new file mode 100644
index 0000000..f02d7b4
--- /dev/null
+++ b/Pages/Security/multitenantselection2.cshtml
@@ -0,0 +1,172 @@
+@page "/multitenantselection2"
+@{
+    ViewData["Title"] = "Multi Tenant Selection 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Signed in as admin@company.com</div>
+                        <div class="text-xs text-gray-400">Choose a workspace to continue</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
+            </div>
+
+            <div class="space-y-4">
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                248 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                1,247 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                3,580 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template x-if="showNotification">
+                <div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
+                            <div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <button @@click="
+                if(loading) return;
+                if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notificationMessage = 'Tenant is ready, will be automatically redirected.';
+                    showNotification = true;
+                    setTimeout(() => showNotification = false, 3000);
+                }, 2000);
+            " :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
+                <template x-if="loading">
+                    <svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                </template>
+                <span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
+                <template x-if="!loading">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </template>
+            </button>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't see your workspace?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/multitenantselection3.cshtml b/Pages/Security/multitenantselection3.cshtml
new file mode 100644
index 0000000..345f48f
--- /dev/null
+++ b/Pages/Security/multitenantselection3.cshtml
@@ -0,0 +1,172 @@
+@page "/multitenantselection3"
+@{
+    ViewData["Title"] = "Multi Tenant Selection 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Select Your<br/>Workspace</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Multiple Workspaces</span><p class="text-xs text-blue-200 mt-0.5">Access all your organizations from one account</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Role-Based Access</span><p class="text-xs text-blue-200 mt-0.5">Each workspace has its own permissions and settings</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure & Isolated</span><p class="text-xs text-blue-200 mt-0.5">Data is completely isolated between workspaces</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-xl backdrop-blur-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Signed in as admin@company.com</div>
+                        <div class="text-xs text-blue-200">Choose a workspace to continue</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
+            </div>
+
+            <div class="space-y-4">
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                248 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                1,247 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                3,580 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template x-if="showNotification">
+                <div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-xl p-4 shadow-lg fade-in z-50 max-w-sm">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
+                            <div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <button @@click="
+                if(loading) return;
+                if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notificationMessage = 'Tenant is ready, will be automatically redirected.';
+                    showNotification = true;
+                    setTimeout(() => showNotification = false, 3000);
+                }, 2000);
+            " :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
+                <template x-if="loading">
+                    <svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                </template>
+                <span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
+                <template x-if="!loading">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </template>
+            </button>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't see your workspace?
+                <a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/multitenantselection4.cshtml b/Pages/Security/multitenantselection4.cshtml
new file mode 100644
index 0000000..9c0d36b
--- /dev/null
+++ b/Pages/Security/multitenantselection4.cshtml
@@ -0,0 +1,172 @@
+@page "/multitenantselection4"
+@{
+    ViewData["Title"] = "Multi Tenant Selection 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex flex-row" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
+            </div>
+
+            <div class="space-y-4">
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                248 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                1,247 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
+                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                3,580 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template x-if="showNotification">
+                <div class="fixed top-6 right-6 bg-green-50 border border-green-200 rounded-full p-4 shadow-lg fade-in z-50 max-w-sm">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
+                            <div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <button @@click="
+                if(loading) return;
+                if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notificationMessage = 'Tenant is ready, will be automatically redirected.';
+                    showNotification = true;
+                    setTimeout(() => showNotification = false, 3000);
+                }, 2000);
+            " :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
+                <template x-if="loading">
+                    <svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                </template>
+                <span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
+                <template x-if="!loading">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </template>
+            </button>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't see your workspace?
+                <a class="text-blue-600 font-semibold text-sm hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/15 rounded-2xl flex items-center justify-center backdrop-blur-sm">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Select Your<br/>Workspace</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Multiple Workspaces</span><p class="text-xs text-blue-200 mt-0.5">Access all your organizations from one account</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Role-Based Access</span><p class="text-xs text-blue-200 mt-0.5">Each workspace has its own permissions and settings</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure & Isolated</span><p class="text-xs text-blue-200 mt-0.5">Data is completely isolated between workspaces</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 border border-white/20 rounded-2xl backdrop-blur-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Signed in as admin@company.com</div>
+                        <div class="text-xs text-blue-200">Choose a workspace to continue</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/multitenantselection5.cshtml b/Pages/Security/multitenantselection5.cshtml
new file mode 100644
index 0000000..36f3ffc
--- /dev/null
+++ b/Pages/Security/multitenantselection5.cshtml
@@ -0,0 +1,172 @@
+@page "/multitenantselection5"
+@{
+    ViewData["Title"] = "Multi Tenant Selection 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, showNotification: false, notificationMessage: '', selectedTenant: '', selectedIndex: -1 }">
+    <div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Select Your<br/>Workspace</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Choose the organization you'd like to access. You can switch between workspaces at any time from your profile settings.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Multiple Workspaces</span><p class="text-xs text-gray-400 mt-0.5">Access all your organizations from one account</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Role-Based Access</span><p class="text-xs text-gray-400 mt-0.5">Each workspace has its own permissions and settings</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Isolated</span><p class="text-xs text-gray-400 mt-0.5">Data is completely isolated between workspaces</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 box-card">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-50 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Signed in as admin@company.com</div>
+                        <div class="text-xs text-gray-400">Choose a workspace to continue</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="text-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Choose Workspace</h2>
+                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Select one of your workspaces below to access the EnterpriseKit platform. Your workspaces are listed with their current status.</p>
+            </div>
+
+            <div class="space-y-3">
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 0 ? 'selected' : ''" @@click="selectedIndex = 0; selectedTenant = 'Acme Corporation'">
+                    <div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Acme Corporation</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Global enterprise technology solutions provider specializing in digital transformation, cloud infrastructure, and managed IT services for Fortune 500 companies worldwide.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                248 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 1 ? 'selected' : ''" @@click="selectedIndex = 1; selectedTenant = 'Stark Industries'">
+                    <div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Stark Industries</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-700">Pending</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Leading industrial manufacturing conglomerate based in Detroit, Michigan. Specializing in advanced manufacturing, defense technology, and sustainable energy solutions.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                1,247 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tenant-card p-5 flex items-start gap-4" :class="selectedIndex === 2 ? 'selected' : ''" @@click="selectedIndex = 2; selectedTenant = 'Wayne Enterprises'">
+                    <div class="w-12 h-12 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold text-gray-900">Wayne Enterprises</h3>
+                            <span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700">Active</span>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">Multinational conglomerate headquartered in New York City with diverse interests in technology, finance, defense, media, and pharmaceuticals across 47 countries.</p>
+                        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
+                                3,580 users
+                            </span>
+                            <span class="flex items-center gap-1">
+                                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                                Enterprise Plan
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template x-if="showNotification">
+                <div class="fixed top-6 right-6 bg-green-50 border border-green-200 p-4 shadow-lg fade-in z-50 max-w-sm">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold text-green-800" x-text="notificationMessage"></div>
+                            <div class="text-xs text-green-600 mt-0.5">You will be automatically redirected.</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <button @@click="
+                if(loading) return;
+                if(!selectedTenant) { notificationMessage='Please select a workspace first.'; showNotification=true; setTimeout(()=>showNotification=false, 2000); return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notificationMessage = 'Tenant is ready, will be automatically redirected.';
+                    showNotification = true;
+                    setTimeout(() => showNotification = false, 3000);
+                }, 2000);
+            " :disabled="loading" class="btn-primary w-full mt-6" :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
+                <template x-if="loading">
+                    <svg class="w-4 h-4 spinner" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                </template>
+                <span x-text="loading ? 'Loading...' : 'Continue to Workspace'"></span>
+                <template x-if="!loading">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                </template>
+            </button>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Don't see your workspace?
+                <a class="auth-link ml-1" href="#">Contact Support</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/Pages/Security/register1.cshtml b/Pages/Security/register1.cshtml
new file mode 100644
index 0000000..ef431eb
--- /dev/null
+++ b/Pages/Security/register1.cshtml
@@ -0,0 +1,146 @@
+@page "/register1"
+@{
+    ViewData["Title"] = "Register 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
+                        <div class="text-xs text-gray-400">Explore all features with no commitment</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
+                <p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
+                if (!document.getElementById('email').value.trim()) { errors.email = true; }
+                if (!document.getElementById('password').value.trim()) { errors.password = true; }
+                if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
+                if (Object.keys(errors).length > 0) return;
+                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
+                    errors.confirmPassword = true;
+                    return;
+                }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="fullname">Full Name</label>
+                        <input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="password">Password</label>
+                        <input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-gray-900" id="terms" type="checkbox" required>
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Create Account
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Creating account...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Already have an account?
+                <a class="auth-link ml-1" href="/login1">Sign in</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/register2.cshtml b/Pages/Security/register2.cshtml
new file mode 100644
index 0000000..5567bff
--- /dev/null
+++ b/Pages/Security/register2.cshtml
@@ -0,0 +1,146 @@
+@page "/register2"
+@{
+    ViewData["Title"] = "Register 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
+                        <div class="text-xs text-gray-400">Explore all features with no commitment</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
+                <p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
+                if (!document.getElementById('email').value.trim()) { errors.email = true; }
+                if (!document.getElementById('password').value.trim()) { errors.password = true; }
+                if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
+                if (Object.keys(errors).length > 0) return;
+                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
+                    errors.confirmPassword = true;
+                    return;
+                }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="fullname">Full Name</label>
+                        <input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="password">Password</label>
+                        <input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Create Account
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Creating account...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Already have an account?
+                <a class="auth-link ml-1" href="/login2">Sign in</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/register3.cshtml b/Pages/Security/register3.cshtml
new file mode 100644
index 0000000..16bfac6
--- /dev/null
+++ b/Pages/Security/register3.cshtml
@@ -0,0 +1,146 @@
+@page "/register3"
+@{
+    ViewData["Title"] = "Register 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md text-white">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Unified Workspace</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure & Compliant</span><p class="text-xs text-blue-200 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Dedicated support team for your enterprise needs</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Free 30-Day Trial</div>
+                        <div class="text-xs text-blue-200">Explore all features with no commitment</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
+                <p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
+                if (!document.getElementById('email').value.trim()) { errors.email = true; }
+                if (!document.getElementById('password').value.trim()) { errors.password = true; }
+                if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
+                if (Object.keys(errors).length > 0) return;
+                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
+                    errors.confirmPassword = true;
+                    return;
+                }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="fullname">Full Name</label>
+                        <input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="password">Password</label>
+                        <input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Create Account
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Creating account...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Already have an account?
+                <a class="auth-link ml-1" href="/login3">Sign in</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/register4.cshtml b/Pages/Security/register4.cshtml
new file mode 100644
index 0000000..bb0d5e1
--- /dev/null
+++ b/Pages/Security/register4.cshtml
@@ -0,0 +1,146 @@
+@page "/register4"
+@{
+    ViewData["Title"] = "Register 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
+                <p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
+                if (!document.getElementById('email').value.trim()) { errors.email = true; }
+                if (!document.getElementById('password').value.trim()) { errors.password = true; }
+                if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
+                if (Object.keys(errors).length > 0) return;
+                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
+                    errors.confirmPassword = true;
+                    return;
+                }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="fullname">Full Name</label>
+                        <input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="password">Password</label>
+                        <input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="w-4 h-4 border border-gray-300 rounded cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Create Account
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Creating account...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Already have an account?
+                <a class="auth-link ml-1" href="/login4">Sign in</a>
+            </p>
+        </div>
+    </div>
+
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500 items-center justify-center p-12">
+        <div class="max-w-md text-white">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center backdrop-blur">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-200">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Unified Workspace</span><p class="text-xs text-blue-200 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Secure & Compliant</span><p class="text-xs text-blue-200 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">24/7 Support</span><p class="text-xs text-blue-200 mt-0.5">Dedicated support team for your enterprise needs</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur border border-white/20 rounded-2xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Free 30-Day Trial</div>
+                        <div class="text-xs text-blue-200">Explore all features with no commitment</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-200 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/register5.cshtml b/Pages/Security/register5.cshtml
new file mode 100644
index 0000000..85e8aaa
--- /dev/null
+++ b/Pages/Security/register5.cshtml
@@ -0,0 +1,146 @@
+@page "/register5"
+@{
+    ViewData["Title"] = "Register 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Join the<br/>Enterprise Ecosystem</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Create your account to unlock powerful enterprise tools, collaborate with teams, and drive business growth across all your modules.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Unified Workspace</span><p class="text-xs text-gray-400 mt-0.5">Access all enterprise modules from one dashboard</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Secure & Compliant</span><p class="text-xs text-gray-400 mt-0.5">Enterprise-grade security with SSO and MFA support</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">24/7 Support</span><p class="text-xs text-gray-400 mt-0.5">Dedicated support team for your enterprise needs</p></div>
+                </div>
+            </div>
+            <div class="mt-10 feature-box">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Free 30-Day Trial</div>
+                        <div class="text-xs text-gray-400">Explore all features with no commitment</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Create Account</h2>
+                <p class="text-gray-500 text-sm mt-1">Fill in the details below to get started</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                if (!document.getElementById('fullname').value.trim()) { errors.fullname = true; }
+                if (!document.getElementById('email').value.trim()) { errors.email = true; }
+                if (!document.getElementById('password').value.trim()) { errors.password = true; }
+                if (!document.getElementById('confirmPassword').value.trim()) { errors.confirmPassword = true; }
+                if (Object.keys(errors).length > 0) return;
+                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
+                    errors.confirmPassword = true;
+                    return;
+                }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Registration successful! A confirmation email has been sent to your email address.' };
+                    setTimeout(() => { notification.show = false; }, 5000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="fullname">Full Name</label>
+                        <input class="input-field" id="fullname" type="text" placeholder="John Doe" required :class="{ 'error': errors.fullname }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="email">Email Address</label>
+                        <input class="input-field" id="email" type="email" placeholder="you@company.com" required :class="{ 'error': errors.email }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="password">Password</label>
+                        <input class="input-field" id="password" type="password" placeholder="Create a strong password" required :class="{ 'error': errors.password }">
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input class="input-field" id="confirmPassword" type="password" placeholder="Confirm your password" required :class="{ 'error': errors.confirmPassword }">
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input class="w-4 h-4 border border-gray-300 rounded-none cursor-pointer accent-blue-600" id="terms" type="checkbox" required>
+                        <label class="text-sm text-gray-600 cursor-pointer select-none" for="terms">I agree to the <a class="auth-link text-xs" href="#">Terms of Service</a> and <a class="auth-link text-xs" href="#">Privacy Policy</a></label>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                Create Account
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Creating account...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <p class="mt-6 text-center text-sm text-gray-500">
+                Already have an account?
+                <a class="auth-link ml-1" href="/login5">Sign in</a>
+            </p>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/resetpassword1.cshtml b/Pages/Security/resetpassword1.cshtml
new file mode 100644
index 0000000..a6781f4
--- /dev/null
+++ b/Pages/Security/resetpassword1.cshtml
@@ -0,0 +1,143 @@
+@page "/resetpassword1"
+@{
+    ViewData["Title"] = "Reset Password 1";
+}
+@{
+    ViewData["SidebarVariant"] = "1";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth1.css"] = "css/auth1.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-gray-50 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-100 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Password Tips</div>
+                        <div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="flex items-center gap-3 mb-8 lg:hidden">
+                <div class="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center">
+                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
+                </div>
+            </div>
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                const pass = document.getElementById('new_password').value;
+                const confirm = document.getElementById('confirm_password').value;
+                if (!pass.trim()) { errors.new_password = true; return; }
+                if (pass.length < 8) { errors.new_password = true; return; }
+                if (!confirm.trim()) { errors.confirm_password = true; return; }
+                if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
+                    setTimeout(() => { notification.show = false; window.location.href = 'login1.html'; }, 3000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="new_password">New Password</label>
+                        <input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
+                        <p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirm_password">Confirm New Password</label>
+                        <input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
+                        <p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                                Reset Password
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Resetting password...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login1">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/resetpassword2.cshtml b/Pages/Security/resetpassword2.cshtml
new file mode 100644
index 0000000..dfbb1b2
--- /dev/null
+++ b/Pages/Security/resetpassword2.cshtml
@@ -0,0 +1,143 @@
+@page "/resetpassword2"
+@{
+    ViewData["Title"] = "Reset Password 2";
+}
+@{
+    ViewData["SidebarVariant"] = "2";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth2.css"] = "css/auth2.css";
+
+}
+
+<section class="min-h-screen flex" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gradient-to-br from-blue-50/30 to-white items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-blue-100 rounded-xl shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Password Tips</div>
+                        <div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="flex items-center gap-3 mb-8 lg:hidden">
+                <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center">
+                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
+                </div>
+            </div>
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                const pass = document.getElementById('new_password').value;
+                const confirm = document.getElementById('confirm_password').value;
+                if (!pass.trim()) { errors.new_password = true; return; }
+                if (pass.length < 8) { errors.new_password = true; return; }
+                if (!confirm.trim()) { errors.confirm_password = true; return; }
+                if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
+                    setTimeout(() => { notification.show = false; window.location.href = 'login2.html'; }, 3000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="new_password">New Password</label>
+                        <input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
+                        <p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirm_password">Confirm New Password</label>
+                        <input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
+                        <p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                                Reset Password
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Resetting password...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login2">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/resetpassword3.cshtml b/Pages/Security/resetpassword3.cshtml
new file mode 100644
index 0000000..5c635e3
--- /dev/null
+++ b/Pages/Security/resetpassword3.cshtml
@@ -0,0 +1,143 @@
+@page "/resetpassword3"
+@{
+    ViewData["Title"] = "Reset Password 3";
+}
+@{
+    ViewData["SidebarVariant"] = "3";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth3.css"] = "css/auth3.css";
+
+}
+
+<section class="min-h-screen flex bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Create a New<br/>Account Password</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Strong Password</span><p class="text-xs text-blue-200 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Encrypted Security</span><p class="text-xs text-blue-200 mt-0.5">Your password is encrypted end-to-end</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded check-icon flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Instant Activation</span><p class="text-xs text-blue-200 mt-0.5">Your new password will be active immediately</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Password Tips</div>
+                        <div class="text-xs text-blue-200">Use a mix of letters, numbers and special characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="flex items-center gap-3 mb-8 lg:hidden">
+                <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
+                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-white">EnterpriseKit</div>
+                </div>
+            </div>
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-white">Reset Password</h2>
+                <p class="text-blue-100 text-sm mt-1">Enter your new password below.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                const pass = document.getElementById('new_password').value;
+                const confirm = document.getElementById('confirm_password').value;
+                if (!pass.trim()) { errors.new_password = true; return; }
+                if (pass.length < 8) { errors.new_password = true; return; }
+                if (!confirm.trim()) { errors.confirm_password = true; return; }
+                if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
+                    setTimeout(() => { notification.show = false; window.location.href = 'login3.html'; }, 3000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="new_password">New Password</label>
+                        <input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
+                        <p x-show="errors.new_password" class="text-xs text-red-300 mt-1" x-cloak>Password must be at least 8 characters.</p>
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirm_password">Confirm New Password</label>
+                        <input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
+                        <p x-show="errors.match" class="text-xs text-red-300 mt-1" x-cloak>Passwords do not match.</p>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                                Reset Password
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Resetting password...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login3">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/resetpassword4.cshtml b/Pages/Security/resetpassword4.cshtml
new file mode 100644
index 0000000..763606c
--- /dev/null
+++ b/Pages/Security/resetpassword4.cshtml
@@ -0,0 +1,143 @@
+@page "/resetpassword4"
+@{
+    ViewData["Title"] = "Reset Password 4";
+}
+@{
+    ViewData["SidebarVariant"] = "4";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth4.css"] = "css/auth4.css";
+
+}
+
+<section class="min-h-screen flex flex-row-reverse bg-gradient-to-br from-blue-700 via-blue-600 to-blue-500" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">EnterpriseKit</div>
+                    <div class="text-sm text-blue-100">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-white leading-tight mb-4">Create a New<br/>Account Password</h2>
+            <p class="text-blue-100 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Strong Password</span><p class="text-xs text-blue-200 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Encrypted Security</span><p class="text-xs text-blue-200 mt-0.5">Your password is encrypted end-to-end</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-white text-sm">Instant Activation</span><p class="text-xs text-blue-200 mt-0.5">Your new password will be active immediately</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-white">Password Tips</div>
+                        <div class="text-xs text-blue-200">Use a mix of letters, numbers and special characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="flex items-center gap-3 mb-8 lg:hidden">
+                <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
+                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-white">EnterpriseKit</div>
+                </div>
+            </div>
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-white">Reset Password</h2>
+                <p class="text-blue-100 text-sm mt-1">Enter your new password below.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                const pass = document.getElementById('new_password').value;
+                const confirm = document.getElementById('confirm_password').value;
+                if (!pass.trim()) { errors.new_password = true; return; }
+                if (pass.length < 8) { errors.new_password = true; return; }
+                if (!confirm.trim()) { errors.confirm_password = true; return; }
+                if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
+                    setTimeout(() => { notification.show = false; window.location.href = 'login4.html'; }, 3000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="new_password">New Password</label>
+                        <input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
+                        <p x-show="errors.new_password" class="text-xs text-red-300 mt-1" x-cloak>Password must be at least 8 characters.</p>
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirm_password">Confirm New Password</label>
+                        <input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
+                        <p x-show="errors.match" class="text-xs text-red-300 mt-1" x-cloak>Passwords do not match.</p>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                                Reset Password
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Resetting password...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login4">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-blue-100 shadow-lg rounded-2xl px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Security/resetpassword5.cshtml b/Pages/Security/resetpassword5.cshtml
new file mode 100644
index 0000000..a18c38f
--- /dev/null
+++ b/Pages/Security/resetpassword5.cshtml
@@ -0,0 +1,143 @@
+@page "/resetpassword5"
+@{
+    ViewData["Title"] = "Reset Password 5";
+}
+@{
+    ViewData["SidebarVariant"] = "5";
+    ViewData["HideChrome"] = true;
+    ViewData["Css:auth5.css"] = "css/auth5.css";
+
+}
+
+<section class="min-h-screen flex bg-white" x-data="{ loading: false, notification: { show: false, message: '' }, errors: {} }">
+    <div class="hidden lg:flex w-1/2 bg-gray-50 items-center justify-center p-12">
+        <div class="max-w-md">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-14 h-14 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-gray-900">EnterpriseKit</div>
+                    <div class="text-sm text-gray-500">Enterprise Application Platform</div>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold text-gray-900 leading-tight mb-4">Create a New<br/>Account Password</h2>
+            <p class="text-gray-500 leading-relaxed mb-8">Enter and confirm your new password below. Make sure it's strong and unique to keep your account secure.</p>
+            <div class="space-y-4">
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Strong Password</span><p class="text-xs text-gray-400 mt-0.5">Minimum 8 characters with mixed case and numbers</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Encrypted Security</span><p class="text-xs text-gray-400 mt-0.5">Your password is encrypted end-to-end</p></div>
+                </div>
+                <div class="flex items-start gap-3">
+                    <div class="w-5 h-5 bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5"><svg class="w-3 h-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
+                    <div><span class="font-semibold text-gray-900 text-sm">Instant Activation</span><p class="text-xs text-gray-400 mt-0.5">Your new password will be active immediately</p></div>
+                </div>
+            </div>
+            <div class="mt-10 p-4 bg-white border border-gray-200">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue-100 flex items-center justify-center flex-shrink-0">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
+                    </div>
+                    <div>
+                        <div class="text-sm font-semibold text-gray-900">Password Tips</div>
+                        <div class="text-xs text-gray-400">Use a mix of letters, numbers and special characters</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-10 lg:p-16">
+        <div class="w-full max-w-md">
+            <div class="flex items-center gap-3 mb-8 lg:hidden">
+                <div class="w-10 h-10 bg-blue-600 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-gray-900">EnterpriseKit</div>
+                </div>
+            </div>
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold text-gray-900">Reset Password</h2>
+                <p class="text-gray-500 text-sm mt-1">Enter your new password below.</p>
+            </div>
+
+            <form @@submit.prevent="
+                errors = {};
+                const pass = document.getElementById('new_password').value;
+                const confirm = document.getElementById('confirm_password').value;
+                if (!pass.trim()) { errors.new_password = true; return; }
+                if (pass.length < 8) { errors.new_password = true; return; }
+                if (!confirm.trim()) { errors.confirm_password = true; return; }
+                if (pass !== confirm) { errors.confirm_password = true; errors.match = true; return; }
+                loading = true;
+                setTimeout(() => {
+                    loading = false;
+                    notification = { show: true, message: 'Password has been reset successfully! Redirecting to sign in...' };
+                    setTimeout(() => { notification.show = false; window.location.href = 'login5.html'; }, 3000);
+                }, 3000);
+            ">
+                <div class="space-y-4">
+                    <div>
+                        <label class="form-label" for="new_password">New Password</label>
+                        <input class="input-field" id="new_password" type="password" placeholder="Enter new password" required :class="{ 'error': errors.new_password }">
+                        <p x-show="errors.new_password" class="text-xs text-red-500 mt-1" x-cloak>Password must be at least 8 characters.</p>
+                    </div>
+                    <div>
+                        <label class="form-label" for="confirm_password">Confirm New Password</label>
+                        <input class="input-field" id="confirm_password" type="password" placeholder="Confirm new password" required :class="{ 'error': errors.confirm_password }">
+                        <p x-show="errors.match" class="text-xs text-red-500 mt-1" x-cloak>Passwords do not match.</p>
+                    </div>
+                    <button class="btn-primary" type="submit" :disabled="loading">
+                        <template x-if="!loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
+                                Reset Password
+                            </span>
+                        </template>
+                        <template x-if="loading">
+                            <span class="flex items-center gap-2">
+                                <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+                                Resetting password...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </form>
+
+            <div class="mt-6 text-center">
+                <a class="auth-link inline-flex items-center gap-1.5" href="/login5">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5l-7.5-7.5 7.5-7.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18"/></svg>
+                    Back to Sign In
+                </a>
+            </div>
+        </div>
+    </div>
+<div class="fixed top-4 right-4 z-[200] transition-all duration-300"
+     x-show="notification.show"
+     x-transition:enter="transform ease-out duration-300"
+     x-transition:enter-start="translate-x-full opacity-0"
+     x-transition:enter-end="translate-x-0 opacity-100"
+     x-transition:leave="transform ease-in duration-200"
+     x-transition:leave-start="translate-x-0 opacity-100"
+     x-transition:leave-end="translate-x-full opacity-0"
+     x-cloak>
+    <div class="flex items-center gap-3 bg-white border border-gray-200 shadow-lg px-5 py-4 min-w-[320px]">
+        <div class="w-8 h-8 bg-green-100 flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+        </div>
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-gray-900">Success</p>
+            <p class="text-xs text-gray-500" x-text="notification.message"></p>
+        </div>
+        <button class="text-gray-400 hover:text-gray-600" @@click="notification.show = false">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
+</div>
+
+</section>
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
new file mode 100644
index 0000000..e6e0644
--- /dev/null
+++ b/Pages/Shared/_Layout.cshtml
@@ -0,0 +1,53 @@
+@{
+    var sidebarVariant = (ViewData["SidebarVariant"] as string) ?? "1";
+    var hideChrome = ViewData["HideChrome"] is bool hc && hc;
+}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EDK - @ViewData["Title"]</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <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;450;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="~/css/style@(sidebarVariant).css" asp-append-version="true" />
+    @foreach (var key in ViewData.Keys.Where(k => k.StartsWith("Css:")).ToList())
+    {
+        <link rel="stylesheet" href="~/@(ViewData[key])" asp-append-version="true" />
+    }
+    <style>
+        body { font-family: "Poppins", sans-serif; }
+        [x-cloak] { display: none !important; }
+    </style>
+</head>
+<body>
+    @if (!hideChrome && ViewData["SidebarVariant"] is string)
+    {
+        <div x-data="{ side: true, isMobile: false }"
+             x-init="isMobile = window.innerWidth <= 768; if(isMobile){ side = false } window.addEventListener('resize', function(){ isMobile = window.innerWidth <= 768; if(isMobile){ side = false } else { side = true } })">
+            <div x-show="side && isMobile" x-on:click="side = false" class="fixed inset-0 bg-black/60 z-40 md:hidden"></div>
+            <partial name="_Sidebar@(sidebarVariant)" />
+            <main id="main" x-bind:class="{ 'shift': side }">
+                <partial name="_Topbar" />
+                @RenderBody()
+            </main>
+        </div>
+    }
+    else
+    {
+        @RenderBody()
+    }
+
+    <script src="~/js/script.js" asp-append-version="true"></script>
+    @foreach (var key in ViewData.Keys.Where(k => k.StartsWith("Js:")).ToList())
+    {
+        <script src="~/@(ViewData[key])" asp-append-version="true"></script>
+    }
+
+    @await RenderSectionAsync("Scripts", required: false)
+</body>
+</html>
diff --git a/Pages/Shared/_Layout.cshtml.css b/Pages/Shared/_Layout.cshtml.css
new file mode 100644
index 0000000..c187c02
--- /dev/null
+++ b/Pages/Shared/_Layout.cshtml.css
@@ -0,0 +1,48 @@
+/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+a {
+  color: #0077cc;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  line-height: 60px;
+}
diff --git a/Pages/Shared/_Sidebar1.cshtml b/Pages/Shared/_Sidebar1.cshtml
new file mode 100644
index 0000000..2210bdd
--- /dev/null
+++ b/Pages/Shared/_Sidebar1.cshtml
@@ -0,0 +1,45 @@
+<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
+    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0 border-b border-gray-100">
+        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #1e293b;">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
+    </div>
+    <div id="sidebar-nav-wrap">
+        <nav id="sidebar-nav">
+            <div class="section-label dt">Main</div>
+            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-crm1" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="/dashboard-crm2" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="/dashboard-crm3" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="/dashboard-crm4" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="/dashboard-crm5" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-eam1" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="/dashboard-eam2" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="/dashboard-eam3" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="/dashboard-eam4" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="/dashboard-eam5" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-fms1" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="/dashboard-fms2" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="/dashboard-fms3" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="/dashboard-fms4" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="/dashboard-fms5" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-hrm1" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="/dashboard-hrm2" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="/dashboard-hrm3" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="/dashboard-hrm4" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="/dashboard-hrm5" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-itsm1" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="/dashboard-itsm2" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="/dashboard-itsm3" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="/dashboard-itsm4" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="/dashboard-itsm5" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-pos1" class="mi sub"><span class="lbl dt">POS1</span></a><a href="/dashboard-pos2" class="mi sub"><span class="lbl dt">POS2</span></a><a href="/dashboard-pos3" class="mi sub"><span class="lbl dt">POS3</span></a><a href="/dashboard-pos4" class="mi sub"><span class="lbl dt">POS4</span></a><a href="/dashboard-pos5" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-rms1" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="/dashboard-rms2" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="/dashboard-rms3" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="/dashboard-rms4" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="/dashboard-rms5" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-scm1" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="/dashboard-scm2" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="/dashboard-scm3" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="/dashboard-scm4" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="/dashboard-scm5" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-tms1" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="/dashboard-tms2" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="/dashboard-tms3" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="/dashboard-tms4" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="/dashboard-tms5" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-wms1" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="/dashboard-wms2" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="/dashboard-wms3" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="/dashboard-wms4" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="/dashboard-wms5" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
+            <div class="section-label dt">Components</div>
+            <a href="/alerts1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
+            <a href="/buttons1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
+            <a href="/cards1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
+            <a href="/datatables1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
+            <a href="/forms1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
+            <a href="/pickers1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
+            <a href="/selection1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
+            <a href="/tabs1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
+            <div class="section-label dt">Pages</div>
+            <a href="/empty1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
+            <a href="/badrequest1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
+            <a href="/error5001" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
+            <a href="/forbidden1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
+            <a href="/landing1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
+            <a href="/notfound1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
+            <a href="/toomany1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
+            <a href="/unauthorized1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
+            <a href="/unavailable1" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
+            <div class="section-label dt">Security</div>
+            <a href="/login1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
+            <a href="/logout1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
+            <a href="/register1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
+            <a href="/multitenantselection1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
+            <a href="/confirmemail1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
+            <a href="/forgotpassword1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
+            <a href="/resetpassword1" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
+        </nav>
+        <div id="sb-track"><div id="sb-thumb"></div></div>
+    </div>
+    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-gray-100 shrink-0 text-gray-400 text-xs">
+        <div class="flex items-center gap-2"><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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
+    </div>
+</div>
diff --git a/Pages/Shared/_Sidebar2.cshtml b/Pages/Shared/_Sidebar2.cshtml
new file mode 100644
index 0000000..aa08dee
--- /dev/null
+++ b/Pages/Shared/_Sidebar2.cshtml
@@ -0,0 +1,45 @@
+<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
+    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0 border-b border-gray-100">
+        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #2563eb;">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
+    </div>
+    <div id="sidebar-nav-wrap">
+        <nav id="sidebar-nav">
+            <div class="section-label dt">Main</div>
+            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-crm1" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="/dashboard-crm2" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="/dashboard-crm3" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="/dashboard-crm4" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="/dashboard-crm5" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-eam1" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="/dashboard-eam2" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="/dashboard-eam3" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="/dashboard-eam4" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="/dashboard-eam5" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-fms1" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="/dashboard-fms2" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="/dashboard-fms3" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="/dashboard-fms4" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="/dashboard-fms5" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-hrm1" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="/dashboard-hrm2" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="/dashboard-hrm3" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="/dashboard-hrm4" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="/dashboard-hrm5" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-itsm1" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="/dashboard-itsm2" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="/dashboard-itsm3" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="/dashboard-itsm4" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="/dashboard-itsm5" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-pos1" class="mi sub"><span class="lbl dt">POS1</span></a><a href="/dashboard-pos2" class="mi sub"><span class="lbl dt">POS2</span></a><a href="/dashboard-pos3" class="mi sub"><span class="lbl dt">POS3</span></a><a href="/dashboard-pos4" class="mi sub"><span class="lbl dt">POS4</span></a><a href="/dashboard-pos5" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-rms1" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="/dashboard-rms2" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="/dashboard-rms3" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="/dashboard-rms4" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="/dashboard-rms5" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-scm1" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="/dashboard-scm2" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="/dashboard-scm3" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="/dashboard-scm4" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="/dashboard-scm5" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-tms1" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="/dashboard-tms2" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="/dashboard-tms3" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="/dashboard-tms4" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="/dashboard-tms5" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-wms1" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="/dashboard-wms2" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="/dashboard-wms3" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="/dashboard-wms4" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="/dashboard-wms5" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
+            <div class="section-label dt">Components</div>
+            <a href="/alerts2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
+            <a href="/buttons2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
+            <a href="/cards2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
+            <a href="/datatables2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
+            <a href="/forms2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
+            <a href="/pickers2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
+            <a href="/selection2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
+            <a href="/tabs2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
+            <div class="section-label dt">Pages</div>
+            <a href="/empty2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
+            <a href="/badrequest2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
+            <a href="/error5002" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
+            <a href="/forbidden2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
+            <a href="/landing2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
+            <a href="/notfound2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
+            <a href="/toomany2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
+            <a href="/unauthorized2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
+            <a href="/unavailable2" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
+            <div class="section-label dt">Security</div>
+            <a href="/login2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
+            <a href="/logout2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
+            <a href="/register2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
+            <a href="/multitenantselection2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
+            <a href="/confirmemail2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
+            <a href="/forgotpassword2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
+            <a href="/resetpassword2" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
+        </nav>
+        <div id="sb-track"><div id="sb-thumb"></div></div>
+    </div>
+    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-gray-100 shrink-0 text-gray-400 text-xs">
+        <div class="flex items-center gap-2"><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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
+    </div>
+</div>
diff --git a/Pages/Shared/_Sidebar3.cshtml b/Pages/Shared/_Sidebar3.cshtml
new file mode 100644
index 0000000..83b0cfe
--- /dev/null
+++ b/Pages/Shared/_Sidebar3.cshtml
@@ -0,0 +1,45 @@
+<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
+    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0 border-b border-gray-100">
+        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #2563eb;">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
+    </div>
+    <div id="sidebar-nav-wrap">
+        <nav id="sidebar-nav">
+            <div class="section-label dt">Main</div>
+            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-crm1" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="/dashboard-crm2" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="/dashboard-crm3" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="/dashboard-crm4" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="/dashboard-crm5" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-eam1" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="/dashboard-eam2" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="/dashboard-eam3" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="/dashboard-eam4" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="/dashboard-eam5" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-fms1" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="/dashboard-fms2" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="/dashboard-fms3" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="/dashboard-fms4" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="/dashboard-fms5" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-hrm1" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="/dashboard-hrm2" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="/dashboard-hrm3" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="/dashboard-hrm4" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="/dashboard-hrm5" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-itsm1" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="/dashboard-itsm2" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="/dashboard-itsm3" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="/dashboard-itsm4" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="/dashboard-itsm5" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-pos1" class="mi sub"><span class="lbl dt">POS1</span></a><a href="/dashboard-pos2" class="mi sub"><span class="lbl dt">POS2</span></a><a href="/dashboard-pos3" class="mi sub"><span class="lbl dt">POS3</span></a><a href="/dashboard-pos4" class="mi sub"><span class="lbl dt">POS4</span></a><a href="/dashboard-pos5" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-rms1" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="/dashboard-rms2" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="/dashboard-rms3" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="/dashboard-rms4" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="/dashboard-rms5" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-scm1" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="/dashboard-scm2" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="/dashboard-scm3" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="/dashboard-scm4" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="/dashboard-scm5" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-tms1" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="/dashboard-tms2" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="/dashboard-tms3" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="/dashboard-tms4" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="/dashboard-tms5" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-wms1" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="/dashboard-wms2" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="/dashboard-wms3" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="/dashboard-wms4" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="/dashboard-wms5" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
+            <div class="section-label dt">Components</div>
+            <a href="/alerts3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
+            <a href="/buttons3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
+            <a href="/cards3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
+            <a href="/datatables3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
+            <a href="/forms3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
+            <a href="/pickers3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
+            <a href="/selection3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
+            <a href="/tabs3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
+            <div class="section-label dt">Pages</div>
+            <a href="/empty3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
+            <a href="/badrequest3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
+            <a href="/error5003" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
+            <a href="/forbidden3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
+            <a href="/landing3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
+            <a href="/notfound3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
+            <a href="/toomany3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
+            <a href="/unauthorized3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
+            <a href="/unavailable3" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
+            <div class="section-label dt">Security</div>
+            <a href="/login3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
+            <a href="/logout3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
+            <a href="/register3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
+            <a href="/multitenantselection3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
+            <a href="/confirmemail3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
+            <a href="/forgotpassword3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
+            <a href="/resetpassword3" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
+        </nav>
+        <div id="sb-track"><div id="sb-thumb"></div></div>
+    </div>
+    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-white/10 shrink-0 text-slate-300 text-xs">
+        <div class="flex items-center gap-2"><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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
+    </div>
+</div>
diff --git a/Pages/Shared/_Sidebar4.cshtml b/Pages/Shared/_Sidebar4.cshtml
new file mode 100644
index 0000000..de2a435
--- /dev/null
+++ b/Pages/Shared/_Sidebar4.cshtml
@@ -0,0 +1,45 @@
+<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
+    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0">
+        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #2563eb;">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
+    </div>
+    <div id="sidebar-nav-wrap">
+        <nav id="sidebar-nav">
+            <div class="section-label dt">Main</div>
+            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-crm1" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="/dashboard-crm2" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="/dashboard-crm3" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="/dashboard-crm4" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="/dashboard-crm5" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-eam1" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="/dashboard-eam2" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="/dashboard-eam3" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="/dashboard-eam4" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="/dashboard-eam5" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-fms1" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="/dashboard-fms2" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="/dashboard-fms3" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="/dashboard-fms4" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="/dashboard-fms5" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-hrm1" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="/dashboard-hrm2" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="/dashboard-hrm3" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="/dashboard-hrm4" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="/dashboard-hrm5" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-itsm1" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="/dashboard-itsm2" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="/dashboard-itsm3" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="/dashboard-itsm4" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="/dashboard-itsm5" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-pos1" class="mi sub"><span class="lbl dt">POS1</span></a><a href="/dashboard-pos2" class="mi sub"><span class="lbl dt">POS2</span></a><a href="/dashboard-pos3" class="mi sub"><span class="lbl dt">POS3</span></a><a href="/dashboard-pos4" class="mi sub"><span class="lbl dt">POS4</span></a><a href="/dashboard-pos5" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-rms1" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="/dashboard-rms2" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="/dashboard-rms3" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="/dashboard-rms4" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="/dashboard-rms5" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-scm1" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="/dashboard-scm2" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="/dashboard-scm3" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="/dashboard-scm4" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="/dashboard-scm5" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-tms1" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="/dashboard-tms2" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="/dashboard-tms3" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="/dashboard-tms4" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="/dashboard-tms5" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-wms1" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="/dashboard-wms2" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="/dashboard-wms3" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="/dashboard-wms4" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="/dashboard-wms5" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
+            <div class="section-label dt">Components</div>
+            <a href="/alerts4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
+            <a href="/buttons4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
+            <a href="/cards4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
+            <a href="/datatables4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
+            <a href="/forms4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
+            <a href="/pickers4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
+            <a href="/selection4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
+            <a href="/tabs4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
+            <div class="section-label dt">Pages</div>
+            <a href="/empty4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
+            <a href="/badrequest4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
+            <a href="/error5004" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
+            <a href="/forbidden4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
+            <a href="/landing4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
+            <a href="/notfound4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
+            <a href="/toomany4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
+            <a href="/unauthorized4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
+            <a href="/unavailable4" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
+            <div class="section-label dt">Security</div>
+            <a href="/login4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
+            <a href="/logout4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
+            <a href="/register4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
+            <a href="/multitenantselection4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
+            <a href="/confirmemail4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
+            <a href="/forgotpassword4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
+            <a href="/resetpassword4" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
+        </nav>
+        <div id="sb-track"><div id="sb-thumb"></div></div>
+    </div>
+    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-white/10 shrink-0 text-slate-300 text-xs flex items-center justify-center">
+        <div class="flex items-center gap-2"><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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
+    </div>
+</div>
diff --git a/Pages/Shared/_Sidebar5.cshtml b/Pages/Shared/_Sidebar5.cshtml
new file mode 100644
index 0000000..5ad8378
--- /dev/null
+++ b/Pages/Shared/_Sidebar5.cshtml
@@ -0,0 +1,45 @@
+<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
+    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0 border-b border-gray-100">
+        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #2563eb;">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
+    </div>
+    <div id="sidebar-nav-wrap">
+        <nav id="sidebar-nav">
+            <div class="section-label dt">Main</div>
+            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-crm1" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="/dashboard-crm2" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="/dashboard-crm3" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="/dashboard-crm4" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="/dashboard-crm5" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-eam1" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="/dashboard-eam2" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="/dashboard-eam3" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="/dashboard-eam4" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="/dashboard-eam5" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-fms1" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="/dashboard-fms2" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="/dashboard-fms3" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="/dashboard-fms4" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="/dashboard-fms5" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-hrm1" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="/dashboard-hrm2" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="/dashboard-hrm3" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="/dashboard-hrm4" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="/dashboard-hrm5" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-itsm1" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="/dashboard-itsm2" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="/dashboard-itsm3" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="/dashboard-itsm4" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="/dashboard-itsm5" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-pos1" class="mi sub"><span class="lbl dt">POS1</span></a><a href="/dashboard-pos2" class="mi sub"><span class="lbl dt">POS2</span></a><a href="/dashboard-pos3" class="mi sub"><span class="lbl dt">POS3</span></a><a href="/dashboard-pos4" class="mi sub"><span class="lbl dt">POS4</span></a><a href="/dashboard-pos5" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-rms1" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="/dashboard-rms2" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="/dashboard-rms3" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="/dashboard-rms4" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="/dashboard-rms5" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-scm1" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="/dashboard-scm2" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="/dashboard-scm3" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="/dashboard-scm4" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="/dashboard-scm5" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-tms1" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="/dashboard-tms2" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="/dashboard-tms3" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="/dashboard-tms4" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="/dashboard-tms5" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="/dashboard-wms1" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="/dashboard-wms2" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="/dashboard-wms3" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="/dashboard-wms4" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="/dashboard-wms5" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
+            <div class="section-label dt">Components</div>
+            <a href="/alerts5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
+            <a href="/buttons5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
+            <a href="/cards5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
+            <a href="/datatables5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
+            <a href="/forms5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
+            <a href="/pickers5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
+            <a href="/selection5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
+            <a href="/tabs5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
+            <div class="section-label dt">Pages</div>
+            <a href="/empty5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
+            <a href="/badrequest5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
+            <a href="/error5005" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
+            <a href="/forbidden5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
+            <a href="/landing5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
+            <a href="/notfound5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
+            <a href="/toomany5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
+            <a href="/unauthorized5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
+            <a href="/unavailable5" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
+            <div class="section-label dt">Security</div>
+            <a href="/login5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
+            <a href="/logout5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
+            <a href="/register5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
+            <a href="/multitenantselection5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
+            <a href="/confirmemail5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
+            <a href="/forgotpassword5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
+            <a href="/resetpassword5" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
+        </nav>
+        <div id="sb-track"><div id="sb-thumb"></div></div>
+    </div>
+    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-gray-100 shrink-0 text-gray-400 text-xs">
+        <div class="flex items-center gap-2"><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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
+    </div>
+</div>
diff --git a/Pages/Shared/_Topbar.cshtml b/Pages/Shared/_Topbar.cshtml
new file mode 100644
index 0000000..b509a93
--- /dev/null
+++ b/Pages/Shared/_Topbar.cshtml
@@ -0,0 +1,15 @@
+<header class="sticky top-0 z-30 h-16 px-4 md:px-6 flex items-center justify-between" style="background:#f1f5f9;">
+    <div class="flex items-center gap-4">
+        <button x-on:click="side = !side" class="p-2 rounded-lg hover:bg-gray-100 transition"><svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+    </div>
+    <div class="flex items-center gap-3">
+        <button class="relative p-2 rounded-lg hover:bg-gray-100 transition">
+            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
+            <span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-blue-500 text-white text-[10px] flex items-center justify-center font-bold">3</span>
+        </button>
+        <div class="flex items-center gap-2 pl-3 ml-1 border-l border-gray-200">
+            <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-xs" style="background: #3b82f6;">JD</div>
+            <div class="hidden sm:block text-sm leading-tight"><p class="font-semibold text-gray-800">John Doe</p><p class="text-gray-400 text-xs">Sales Admin</p></div>
+        </div>
+    </div>
+</header>
diff --git a/Pages/_ViewImports.cshtml b/Pages/_ViewImports.cshtml
new file mode 100644
index 0000000..2bc68e2
--- /dev/null
+++ b/Pages/_ViewImports.cshtml
@@ -0,0 +1,3 @@
+@using Indotalent
+@namespace Indotalent.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
diff --git a/Pages/_ViewStart.cshtml b/Pages/_ViewStart.cshtml
new file mode 100644
index 0000000..a5f1004
--- /dev/null
+++ b/Pages/_ViewStart.cshtml
@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}
diff --git a/Program.cs b/Program.cs
new file mode 100644
index 0000000..a04832b
--- /dev/null
+++ b/Program.cs
@@ -0,0 +1,26 @@
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorPages();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapStaticAssets();
+app.MapRazorPages()
+   .WithStaticAssets();
+
+app.Run();
diff --git a/Properties/PublishProfiles/FolderProfile.pubxml b/Properties/PublishProfiles/FolderProfile.pubxml
new file mode 100644
index 0000000..0ad629f
--- /dev/null
+++ b/Properties/PublishProfiles/FolderProfile.pubxml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- https://go.microsoft.com/fwlink/?LinkID=208121. -->
+<Project>
+  <PropertyGroup>
+    <DeleteExistingFiles>true</DeleteExistingFiles>
+    <ExcludeApp_Data>false</ExcludeApp_Data>
+    <LaunchSiteAfterPublish>true</LaunchSiteAfterPublish>
+    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
+    <LastUsedPlatform>Any CPU</LastUsedPlatform>
+    <PublishProvider>FileSystem</PublishProvider>
+    <PublishUrl>bin\Release\net10.0\publish\</PublishUrl>
+    <WebPublishMethod>FileSystem</WebPublishMethod>
+    <_TargetId>Folder</_TargetId>
+    <SiteUrlToLaunchAfterPublish />
+    <TargetFramework>net10.0</TargetFramework>
+    <ProjectGuid>8ef814d3-27d3-2851-8c79-c47eeaab2a19</ProjectGuid>
+    <SelfContained>false</SelfContained>
+  </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/Properties/launchSettings.json b/Properties/launchSettings.json
new file mode 100644
index 0000000..0e4bfe7
--- /dev/null
+++ b/Properties/launchSettings.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5062",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7123;http://localhost:5062",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
diff --git a/appsettings.Development.json b/appsettings.Development.json
new file mode 100644
index 0000000..770d3e9
--- /dev/null
+++ b/appsettings.Development.json
@@ -0,0 +1,9 @@
+{
+  "DetailedErrors": true,
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
diff --git a/appsettings.json b/appsettings.json
new file mode 100644
index 0000000..fb082d5
--- /dev/null
+++ b/appsettings.json
@@ -0,0 +1,13 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "ConnectionStrings": {
+    "PostgreSQL": "Host=postgres;Port=5432;Database=indotalent;Username=indotalent_admin;Password=nw9703AZz6YmgB@G",
+    "MSSQL": "Server=mssql,1433;Database=indotalent;User Id=sa;Password=nw9703AZz6YmgB@G;TrustServerCertificate=True"
+  }
+}
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..555cabd
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,41 @@
+# =====================================================================
+# Admin Template Razor - Docker Compose untuk Portainer Stack
+# =====================================================================
+# ASP.NET Core Razor Pages .NET 10
+# Routing via Nginx Proxy Manager (container name)
+# Tidak perlu expose port ke host!
+# =====================================================================
+
+services:
+  admintemplate-razor:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: admintemplate-razor
+    restart: unless-stopped
+    # TIDAK PERLU ports: - routing via NPM ke container name
+    expose:
+      - 8080
+    networks:
+      - indotalent-network
+    environment:
+      - ASPNETCORE_ENVIRONMENT=Production
+      - ASPNETCORE_URLS=http://+:8080
+      # Database connection strings (gunakan internal hostnames)
+      - ConnectionStrings__PostgreSQL=Host=postgres;Port=5432;Database=indotalent;Username=indotalent_admin;Password=nw9703AZz6YmgB@G
+      - ConnectionStrings__MSSQL=Server=mssql,1433;Database=indotalent;User Id=sa;Password=nw9703AZz6YmgB@G;TrustServerCertificate=True
+    # =================================================================
+    # RESOURCE LIMITS (Standalone Docker Compose)
+    # =================================================================
+    # Minimal 256MB, Max 512MB
+    mem_limit: 512m          # Max 512 MB RAM
+    mem_reservation: 256m    # Minimal 256 MB RAM
+    cpus: '0.5'              # Max 50% dari 1 CPU core
+    labels:
+      - "indotalent.service=admintemplate-razor"
+      - "indotalent.description=Admin Template ASP.NET Core Razor Pages .NET 10"
+
+networks:
+  indotalent-network:
+    external: true
+    name: indotalent-network
\ No newline at end of file
diff --git a/dotnet-tools.json b/dotnet-tools.json
new file mode 100644
index 0000000..cce89d8
--- /dev/null
+++ b/dotnet-tools.json
@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "10.0.10",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}
\ No newline at end of file
diff --git a/wwwroot/css/auth1.css b/wwwroot/css/auth1.css
new file mode 100644
index 0000000..14a96ac
--- /dev/null
+++ b/wwwroot/css/auth1.css
@@ -0,0 +1,58 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body { font-family: "Poppins", sans-serif; background: #ffffff; color: #334155; }
+
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #334155; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
+
+.btn-primary:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(51,65,85,0.2); }
+
+.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #334155; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1.5px solid #e2e8f0; transition: all 0.2s; cursor: pointer; width: 100%; }
+
+.btn-outline:hover { border-color: #334155; background: #f8fafc; }
+
+.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.875rem; color: #334155; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
+
+.input-field:focus { border-color: #334155; box-shadow: 0 0 0 3px rgba(51,65,85,0.1); }
+
+.input-field::placeholder { color: #94a3b8; }
+
+.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
+
+.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
+
+.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
+
+.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.auth-link { color: #334155; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.auth-link:hover { color: #1e293b; text-decoration: underline; }
+
+.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.text-link:hover { color: #334155; text-decoration: underline; }
+
+.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0.25rem; cursor: pointer; accent-color: #334155; }
+
+.input-field.error { border-color: #ef4444; }
+
+.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
+
+.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
+
+.tenant-card:hover { border-color: #334155; box-shadow: 0 4px 12px rgba(51,65,85,0.1); transform: translateY(-2px); }
+
+.tenant-card.selected { border-color: #334155; background: #f8fafc; }
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner { animation: spin 1s linear infinite; }
+
+.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
+
diff --git a/wwwroot/css/auth2.css b/wwwroot/css/auth2.css
new file mode 100644
index 0000000..6f7fa06
--- /dev/null
+++ b/wwwroot/css/auth2.css
@@ -0,0 +1,58 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
+
+.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
+
+.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1.5px solid #bfdbfe; transition: all 0.2s; cursor: pointer; width: 100%; }
+
+.btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+
+.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.875rem; color: #1e293b; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
+
+.input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
+
+.input-field::placeholder { color: #94a3b8; }
+
+.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
+
+.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
+
+.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
+
+.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.auth-link { color: #2563eb; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.auth-link:hover { color: #1d4ed8; text-decoration: underline; }
+
+.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.text-link:hover { color: #2563eb; text-decoration: underline; }
+
+.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0.25rem; cursor: pointer; accent-color: #2563eb; }
+
+.input-field.error { border-color: #ef4444; }
+
+.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
+
+.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
+
+.tenant-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.1); transform: translateY(-2px); }
+
+.tenant-card.selected { border-color: #2563eb; background: #eff6ff; }
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner { animation: spin 1s linear infinite; }
+
+.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
+
diff --git a/wwwroot/css/auth3.css b/wwwroot/css/auth3.css
new file mode 100644
index 0000000..67a4d43
--- /dev/null
+++ b/wwwroot/css/auth3.css
@@ -0,0 +1,116 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
+
+.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
+
+.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1.5px solid #bfdbfe; transition: all 0.2s; cursor: pointer; width: 100%; }
+
+.btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+
+.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.875rem; color: #1e293b; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
+
+.input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
+
+.input-field::placeholder { color: #94a3b8; }
+
+.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
+
+.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
+
+.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
+
+.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.auth-link { color: #2563eb; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.auth-link:hover { color: #1d4ed8; text-decoration: underline; }
+
+.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.text-link:hover { color: #2563eb; text-decoration: underline; }
+
+.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0.25rem; cursor: pointer; accent-color: #2563eb; }
+
+.input-field.error { border-color: #ef4444; }
+
+.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
+
+.bg-card-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); }
+
+.bg-card-glass:hover { border-color: rgba(255,255,255,0.25); }
+
+.check-icon { background: rgba(255,255,255,0.15); }
+
+.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
+
+.tenant-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.1); transform: translateY(-2px); }
+
+.tenant-card.selected { border-color: #2563eb; background: #eff6ff; }
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner { animation: spin 1s linear infinite; }
+
+.btn-primary-inverse { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; text-decoration: none; }
+
+.btn-primary-inverse:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
+
+.bg-gradient-to-br .form-label {
+    display: block; font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 0.375rem;
+}
+.bg-gradient-to-br .auth-link {
+    color: #93c5fd; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s;
+}
+.bg-gradient-to-br .auth-link:hover {
+    color: #ffffff; text-decoration: underline;
+}
+.bg-gradient-to-br .text-link {
+    color: rgba(255,255,255,0.6); font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s;
+}
+.bg-gradient-to-br .text-link:hover {
+    color: #ffffff; text-decoration: underline;
+}
+.bg-gradient-to-br .btn-primary {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; width: 100%;
+}
+.bg-gradient-to-br .btn-primary:hover {
+    background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.15);
+}
+.bg-gradient-to-br .btn-primary:disabled {
+    opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none;
+}
+.bg-gradient-to-br .btn-outline {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; width: 100%;
+}
+.bg-gradient-to-br .btn-outline:hover {
+    border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1);
+}
+.bg-gradient-to-br .input-field {
+    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 0.5rem; font-size: 0.875rem; color: #ffffff; background: rgba(255,255,255,0.1); transition: border-color 0.2s; outline: none; backdrop-filter: blur(4px);
+}
+.bg-gradient-to-br .input-field:focus {
+    border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
+}
+.bg-gradient-to-br .input-field::placeholder {
+    color: rgba(255,255,255,0.5);
+}
+.bg-gradient-to-br .input-field.error {
+    border-color: #fca5a5;
+}
+.bg-gradient-to-br .input-field.error:focus {
+    box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
+}
+.bg-gradient-to-br .checkbox-custom {
+    width: 1rem; height: 1rem; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 0.25rem; cursor: pointer; accent-color: #93c5fd;
+}
\ No newline at end of file
diff --git a/wwwroot/css/auth4.css b/wwwroot/css/auth4.css
new file mode 100644
index 0000000..5b323b6
--- /dev/null
+++ b/wwwroot/css/auth4.css
@@ -0,0 +1,117 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 9999px; transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
+
+.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
+
+.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 500; border-radius: 9999px; border: 1.5px solid #bfdbfe; transition: all 0.2s; cursor: pointer; width: 100%; }
+
+.btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+
+.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 1rem; font-size: 0.875rem; color: #1e293b; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
+
+.input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
+
+.input-field::placeholder { color: #94a3b8; }
+
+.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
+
+.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
+
+.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
+
+.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.auth-link { color: #2563eb; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.auth-link:hover { color: #1d4ed8; text-decoration: underline; }
+
+.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.text-link:hover { color: #2563eb; text-decoration: underline; }
+
+.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0.5rem; cursor: pointer; accent-color: #2563eb; }
+
+.input-field.error { border-color: #ef4444; }
+
+.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
+
+.bg-card-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 1rem; }
+
+.bg-card-glass:hover { border-color: rgba(255,255,255,0.25); }
+
+.check-icon { background: rgba(255,255,255,0.15); border-radius: 9999px; }
+
+.rounded-2xl { border-radius: 1rem; }
+
+.rounded-full { border-radius: 9999px; }
+
+.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; border-radius: 1rem; }
+
+.tenant-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.1); transform: translateY(-2px); }
+
+.tenant-card.selected { border-color: #2563eb; background: #eff6ff; }
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner { animation: spin 1s linear infinite; }
+
+.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
+
+/* === OVERRIDES for blue gradient background pages (forgotpassword4, resetpassword4) === */
+.bg-gradient-to-br .form-label {
+    display: block; font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 0.375rem;
+}
+.bg-gradient-to-br .auth-link {
+    color: #93c5fd; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s;
+}
+.bg-gradient-to-br .auth-link:hover {
+    color: #ffffff; text-decoration: underline;
+}
+.bg-gradient-to-br .text-link {
+    color: rgba(255,255,255,0.6); font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s;
+}
+.bg-gradient-to-br .text-link:hover {
+    color: #ffffff; text-decoration: underline;
+}
+.bg-gradient-to-br .btn-primary {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 9999px; transition: all 0.2s; cursor: pointer; border: none; width: 100%;
+}
+.bg-gradient-to-br .btn-primary:hover {
+    background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.15);
+}
+.bg-gradient-to-br .btn-primary:disabled {
+    opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none;
+}
+.bg-gradient-to-br .btn-outline {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 500; border-radius: 9999px; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; width: 100%;
+}
+.bg-gradient-to-br .btn-outline:hover {
+    border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1);
+}
+.bg-gradient-to-br .input-field {
+    width: 100%; padding: 0.75rem 1.25rem; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 1rem; font-size: 0.875rem; color: #ffffff; background: rgba(255,255,255,0.1); transition: border-color 0.2s; outline: none; backdrop-filter: blur(4px);
+}
+.bg-gradient-to-br .input-field:focus {
+    border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
+}
+.bg-gradient-to-br .input-field::placeholder {
+    color: rgba(255,255,255,0.5);
+}
+.bg-gradient-to-br .input-field.error {
+    border-color: #fca5a5;
+}
+.bg-gradient-to-br .input-field.error:focus {
+    box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
+}
+.bg-gradient-to-br .checkbox-custom {
+    width: 1rem; height: 1rem; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 0.5rem; cursor: pointer; accent-color: #93c5fd;
+}
\ No newline at end of file
diff --git a/wwwroot/css/auth5.css b/wwwroot/css/auth5.css
new file mode 100644
index 0000000..a862472
--- /dev/null
+++ b/wwwroot/css/auth5.css
@@ -0,0 +1,64 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body { font-family: "Poppins", sans-serif; background: #f8fafc; color: #1e293b; }
+
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0; transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
+
+.btn-primary:hover { background: #1d4ed8; box-shadow: 0 2px 8px rgba(37,99,235,0.2); }
+
+.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 500; border-radius: 0; border: 1.5px solid #bfdbfe; transition: all 0.2s; cursor: pointer; width: 100%; }
+
+.btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+
+.input-field { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0; font-size: 0.875rem; color: #1e293b; background: #fff; transition: border-color 0.2s; outline: none; font-family: "Poppins", sans-serif; }
+
+.input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
+
+.input-field::placeholder { color: #94a3b8; }
+
+.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }
+
+.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
+
+.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
+
+.divider span { font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.auth-link { color: #2563eb; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.auth-link:hover { color: #1d4ed8; text-decoration: underline; }
+
+.text-link { color: #64748b; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: color 0.2s; }
+
+.text-link:hover { color: #2563eb; text-decoration: underline; }
+
+.checkbox-custom { width: 1rem; height: 1rem; border: 1.5px solid #cbd5e1; border-radius: 0; cursor: pointer; accent-color: #2563eb; }
+
+.feature-box { padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0; }
+
+.input-field.error { border-color: #ef4444; }
+
+.input-field.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
+
+.box-card { border: 1px solid #e2e8f0; background: #ffffff; transition: border-color 0.2s, box-shadow 0.2s; }
+
+.box-card:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(37,99,235,0.08); }
+
+.tenant-card { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; background: #ffffff; }
+
+.tenant-card:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.1); }
+
+.tenant-card.selected { border-color: #2563eb; background: #f8fafc; }
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.spinner { animation: spin 1s linear infinite; }
+
+.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; box-shadow: none; }
+
diff --git a/wwwroot/css/cards-page.css b/wwwroot/css/cards-page.css
new file mode 100644
index 0000000..3364ad1
--- /dev/null
+++ b/wwwroot/css/cards-page.css
@@ -0,0 +1,22 @@
+/* Cards Page Specific Styles */
+.ck-card { transition: all .25s ease; }
+.ck-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.1); cursor: pointer; }
+.ck-avatar-stack { display: flex; }
+.ck-avatar-stack .ck-avatar-item { width: 28px; height: 28px; border-radius: 9999px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; margin-right: -8px; }
+.ck-avatar-stack .ck-avatar-item:last-child { margin-right: 0; }
+.ck-star-rating svg { width: 14px; height: 14px; }
+.ck-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 180px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.08); z-index: 40; padding: 6px; }
+.ck-dropdown.open { display: block; }
+.ck-dropdown a { display: block; padding: 8px 12px; font-size: 13px; color: #334155; border-radius: 6px; transition: background .15s; }
+.ck-dropdown a:hover { background: #f1f5f9; }
+.ck-img-placeholder { height: 180px; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); display: flex; align-items: center; justify-content: center; }
+.ck-chart-placeholder { height: 180px; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
+.ck-chart-placeholder .ck-bar-set { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
+.ck-chart-placeholder .ck-bar { width: 24px; border-radius: 4px 4px 0 0; background: #3b82f6; opacity: .3; }
+.ck-chart-placeholder .ck-bar:nth-child(1) { height: 60px; }
+.ck-chart-placeholder .ck-bar:nth-child(2) { height: 90px; }
+.ck-chart-placeholder .ck-bar:nth-child(3) { height: 50px; }
+.ck-chart-placeholder .ck-bar:nth-child(4) { height: 110px; }
+.ck-chart-placeholder .ck-bar:nth-child(5) { height: 70px; }
+.ck-chart-placeholder .ck-bar:nth-child(6) { height: 100px; }
+.ck-chart-placeholder .ck-bar:nth-child(7) { height: 45px; }
diff --git a/wwwroot/css/landing1.css b/wwwroot/css/landing1.css
new file mode 100644
index 0000000..82be1d0
--- /dev/null
+++ b/wwwroot/css/landing1.css
@@ -0,0 +1,25 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #334155; }
+        .nav-link { position: relative; color: #64748b; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .nav-link:hover { color: #334155; }
+        .nav-link.active { color: #334155; font-weight: 600; }
+        .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #334155; border-radius: 1px; }
+        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #334155; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
+        .btn-primary:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(51,65,85,0.2); }
+        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #334155; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; border: 1.5px solid #e2e8f0; transition: all 0.2s; cursor: pointer; }
+        .btn-outline:hover { border-color: #334155; background: #f8fafc; }
+        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #f1f5f9; border-radius: 0.75rem; transition: all 0.25s; cursor: default; }
+        .tech-card:hover { border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.04); transform: translateY(-2px); }
+        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #f8fafc; color: #64748b; margin-bottom: 0.75rem; }
+        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
+        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #f8fafc; color: #334155; flex-shrink: 0; }
+        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
+        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .footer-link:hover { color: #ffffff; }
+        .gradient-text { background: linear-gradient(135deg, #334155 0%, #64748b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 0.8125rem; color: #64748b; font-weight: 500; }
+        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #334155; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
+        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+        #fab-top:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
+        #fab-top svg { width: 1.25rem; height: 1.25rem; }
\ No newline at end of file
diff --git a/wwwroot/css/landing2.css b/wwwroot/css/landing2.css
new file mode 100644
index 0000000..35dbedb
--- /dev/null
+++ b/wwwroot/css/landing2.css
@@ -0,0 +1,25 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+        .nav-link { position: relative; color: #64748b; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .nav-link:hover { color: #2563eb; }
+        .nav-link.active { color: #2563eb; font-weight: 600; }
+        .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #3b82f6; border-radius: 1px; }
+        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
+        .btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
+        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; border: 1.5px solid #bfdbfe; transition: all 0.2s; cursor: pointer; }
+        .btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #f1f5f9; border-radius: 0.75rem; transition: all 0.25s; cursor: default; }
+        .tech-card:hover { border-color: #bfdbfe; box-shadow: 0 4px 16px rgba(37,99,235,0.06); transform: translateY(-2px); }
+        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #eff6ff; color: #3b82f6; margin-bottom: 0.75rem; }
+        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
+        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #eff6ff; color: #3b82f6; flex-shrink: 0; }
+        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
+        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .footer-link:hover { color: #ffffff; }
+        .gradient-text { background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9999px; font-size: 0.8125rem; color: #2563eb; font-weight: 500; }
+        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
+        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+        #fab-top:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
+        #fab-top svg { width: 1.25rem; height: 1.25rem; }
\ No newline at end of file
diff --git a/wwwroot/css/landing3.css b/wwwroot/css/landing3.css
new file mode 100644
index 0000000..c21e31a
--- /dev/null
+++ b/wwwroot/css/landing3.css
@@ -0,0 +1,24 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+        .nav-link { position: relative; color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; text-decoration: none; }
+        .nav-link:hover { color: #ffffff; }
+        .nav-link.active { color: #ffffff; font-weight: 600; }
+        .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.6); border-radius: 1px; }
+        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; cursor: pointer; border: none; }
+        .btn-primary:hover { background: #eff6ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; }
+        .btn-outline:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
+        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem; transition: all 0.25s; cursor: default; }
+        .tech-card:hover { border-color: #bfdbfe; box-shadow: 0 4px 16px rgba(37,99,235,0.06); transform: translateY(-2px); }
+        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #eff6ff; color: #3b82f6; margin-bottom: 0.75rem; }
+        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
+        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #eff6ff; color: #3b82f6; flex-shrink: 0; }
+        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
+        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .footer-link:hover { color: #ffffff; }
+        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; font-size: 0.8125rem; color: rgba(255,255,255,0.9); font-weight: 500; }
+        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
+        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+        #fab-top:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
+        #fab-top svg { width: 1.25rem; height: 1.25rem; }
\ No newline at end of file
diff --git a/wwwroot/css/landing4.css b/wwwroot/css/landing4.css
new file mode 100644
index 0000000..54ff994
--- /dev/null
+++ b/wwwroot/css/landing4.css
@@ -0,0 +1,24 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body { font-family: "Poppins", sans-serif; background: #ffffff; color: #1e293b; }
+        .nav-link { position: relative; color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; text-decoration: none; }
+        .nav-link:hover { color: #ffffff; }
+        .nav-link.active { color: #ffffff; font-weight: 600; }
+        .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.6); border-radius: 1px; }
+        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #ffffff; color: #2563eb; font-size: 0.875rem; font-weight: 600; border-radius: 9999px; transition: all 0.2s; cursor: pointer; border: none; }
+        .btn-primary:hover { background: #eff6ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #ffffff; font-size: 0.875rem; font-weight: 600; border-radius: 9999px; border: 1.5px solid rgba(255,255,255,0.3); transition: all 0.2s; cursor: pointer; }
+        .btn-outline:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
+        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; transition: all 0.25s; cursor: default; }
+        .tech-card:hover { border-color: #bfdbfe; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(-2px); }
+        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #eff6ff; color: #3b82f6; margin-bottom: 0.75rem; }
+        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
+        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #eff6ff; color: #3b82f6; flex-shrink: 0; }
+        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
+        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.2s; cursor: pointer; text-decoration: none; }
+        .footer-link:hover { color: #ffffff; }
+        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; font-size: 0.8125rem; color: rgba(255,255,255,0.9); font-weight: 500; }
+        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
+        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+        #fab-top:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
+        #fab-top svg { width: 1.25rem; height: 1.25rem; }
\ No newline at end of file
diff --git a/wwwroot/css/landing5.css b/wwwroot/css/landing5.css
new file mode 100644
index 0000000..fc60479
--- /dev/null
+++ b/wwwroot/css/landing5.css
@@ -0,0 +1,25 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body { font-family: "Poppins", sans-serif; background: #f8fafc; color: #1e293b; }
+        .nav-link { color: #64748b; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; cursor: pointer; text-decoration: none; }
+        .nav-link:hover { color: #2563eb; }
+        .nav-link.active { color: #2563eb; font-weight: 600; background: #eff6ff; }
+        .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; transition: all 0.15s; cursor: pointer; border: none; }
+        .btn-primary:hover { background: #1d4ed8; }
+        .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; background: transparent; color: #2563eb; font-size: 0.875rem; font-weight: 600; border: 1.5px solid #bfdbfe; transition: all 0.15s; cursor: pointer; }
+        .btn-outline:hover { border-color: #3b82f6; background: #eff6ff; }
+        .tech-card { padding: 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; transition: all 0.2s; cursor: default; }
+        .tech-card:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(37,99,235,0.08); }
+        .tech-card .ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: #eff6ff; color: #3b82f6; margin-bottom: 0.75rem; }
+        .tech-card .ico svg { width: 1.25rem; height: 1.25rem; }
+        .feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #eff6ff; color: #3b82f6; flex-shrink: 0; }
+        .feature-icon svg { width: 1.5rem; height: 1.5rem; }
+        .footer-link { color: #94a3b8; font-size: 0.8125rem; transition: color 0.15s; cursor: pointer; text-decoration: none; }
+        .footer-link:hover { color: #ffffff; }
+        .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 0.8125rem; color: #2563eb; font-weight: 500; }
+        #fab-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.3); transition: all 0.25s; opacity: 0; visibility: hidden; transform: translateY(10px); }
+        #fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+        #fab-top:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
+        #fab-top svg { width: 1.25rem; height: 1.25rem; }
+        .box-shadow-hover { transition: box-shadow 0.2s; }
+        .box-shadow-hover:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
\ No newline at end of file
diff --git a/wwwroot/css/pickers-page.css b/wwwroot/css/pickers-page.css
new file mode 100644
index 0000000..baec142
--- /dev/null
+++ b/wwwroot/css/pickers-page.css
@@ -0,0 +1,11 @@
+/* Pickers Page Specific Styles */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
new file mode 100644
index 0000000..819f612
--- /dev/null
+++ b/wwwroot/css/site.css
@@ -0,0 +1,31 @@
+html {
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: 60px;
+}
+
+.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+  color: var(--bs-secondary-color);
+  text-align: end;
+}
+
+.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+  text-align: start;
+}
\ No newline at end of file
diff --git a/wwwroot/css/style1.css b/wwwroot/css/style1.css
new file mode 100644
index 0000000..f3fb06f
--- /dev/null
+++ b/wwwroot/css/style1.css
@@ -0,0 +1,135 @@
+:root { --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-lighter: #93c5fd; --primary-lightest: #dbeafe; --primary-bg: #eff6ff; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background: #f1f5f9; overflow-x: hidden; }
+        #sidebar-wrap { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; width: 78px; transition: width .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right: 1px solid #e2e8f0; }
+        #sidebar-wrap.open { width: 270px; }
+        #sidebar-header { flex-shrink: 0; }
+        #sidebar-footer { flex-shrink: 0; }
+        #sidebar-nav-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+        #sidebar-nav { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+        #sidebar-wrap.open #sidebar-nav .mi { margin-right: 20px; }
+        #sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        #sb-track { position: absolute; top: 0; right: 0; height: 100%; width: 16px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; }
+        #sidebar-nav-wrap:hover #sb-track { opacity: 1; }
+        #sb-track.show { opacity: 1; }
+        #sb-thumb { position: absolute; right: 4px; width: 7px; background: rgba(148,163,184,.3); border-radius: 999px; cursor: pointer !important; pointer-events: auto; transition: background .2s; min-height: 24px; }
+        #sb-thumb:hover { background: rgba(148,163,184,.5); }
+        #main { margin-left: 78px; transition: margin-left .35s cubic-bezier(.4,0,.2,1); min-height: 100vh; }
+        #main.shift { margin-left: 270px; }
+        @media (max-width: 768px) { #sidebar-wrap { transform: translateX(-100%); width: 260px !important; } #sidebar-wrap.open { transform: translateX(0); } #main { margin-left: 0 !important; } #main.shift { margin-left: 0 !important; } }
+        .section-label { padding: 16px 20px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; white-space: nowrap; transition: opacity .2s ease; }
+        .mi { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 1px 10px; border-radius: 8px; color: #64748b; cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 450; }
+        .mi::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #94a3b8; transition: height .25s ease; }
+        .mi:hover { background: rgba(0,0,0,.04); color: #334155; }
+        .mi:hover::before { height: 18px; }
+        .mi.active { background: rgba(0,0,0,.04); color: #334155; font-weight: 600; }
+        .mi.active::before { height: 22px; background: #334155; }
+        .mi.active .ico svg { stroke: #334155; }
+        .mi .ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .mi .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
+        .mi .lbl { font-size: 14px; }
+        #sidebar-wrap:not(.open) .mi .lbl { display: none; }
+        #sidebar-wrap:not(.open) .mi { justify-content: center; padding: 11px 0; margin: 1px 12px; }
+        #sidebar-wrap:not(.open) .mi .ico { width: 22px; height: 22px; }
+        #sidebar-wrap:not(.open) .mi .ico svg { width: 20px; height: 20px; }
+        #sidebar-wrap:not(.open) .mi::before { display: none; }
+        #sidebar-wrap:not(.open) .arr { display: none; }
+        .submenu-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
+        .submenu-group.open > .submenu-body { max-height: 1200px; }
+        .submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
+        .arr { margin-left: auto; transition: transform .3s ease, opacity .2s; opacity: .35; }
+        .arr.rot { transform: rotate(180deg); }
+        .mi:hover .arr { opacity: .6; }
+        .mi.active .arr { opacity: .6; }
+        .dt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .dt { opacity: 1; transition-delay: .15s; }
+        #sidebar-wrap:not(.open) .dt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .lt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .lt { opacity: 1; transition-delay: .38s; }
+        #sidebar-wrap:not(.open) .lt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .chart-container { position: relative; width: 100%; }
+        .progress-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
+        .progress-bar .fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
+        .grid-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+        .grid-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
+        .grid-table tr:hover td { background: #f8fafc; }
+        .grid-table { width: 100%; border-collapse: collapse; }
+        .grid-wrap { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
+        .grid-wrap::-webkit-scrollbar { width: 4px; }
+        .grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+        .badge-blue { background: #dbeafe; color: #1e40af; }
+        .badge-green { background: #d1fae5; color: #065f46; }
+        .badge-amber { background: #fef3c7; color: #92400e; }
+        .badge-red { background: #fee2e2; color: #991b1b; }
+        .badge-gray { background: #f1f5f9; color: #475569; }
+        .badge-indigo { background: #e0e7ff; color: #3730a3; }
+        .badge-purple { background: #ede9fe; color: #5b21b6; }
+        .badge-pink { background: #fce7f3; color: #9d174d; }
+        .badge-cyan { background: #cffafe; color: #155e75; }
+        .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; }
+        .chip-blue { background: #2563eb; }
+        .chip-green { background: #10b981; }
+        .chip-amber { background: #f59e0b; }
+        .chip-red { background: #e11d48; }
+        .chip-indigo { background: #6366f1; }
+        .chip-purple { background: #8b5cf6; }
+        .chip-pink { background: #ec4899; }
+        .chip-cyan { background: #06b6d4; }
+        .chip-orange { background: #f97316; }
+        .chip-teal { background: #14b8a6; }
+        .activity-feed { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
+        .activity-feed::-webkit-scrollbar { width: 4px; }
+        .activity-feed::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .anim-fade { animation: fadeInUp .5s ease forwards; }
+        .anim-delay-1 { animation-delay: .1s; }
+        .anim-delay-2 { animation-delay: .2s; }
+        .anim-delay-3 { animation-delay: .3s; }
+        .anim-delay-4 { animation-delay: .4s; }
+        .anim-delay-5 { animation-delay: .5s; }
+        .anim-delay-6 { animation-delay: .6s; }
+        .card-bg { background: #eff6ff; border-color: #bfdbfe; }
+        .kpi-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
+        .kpi-card-sm { border-radius: 14px; padding: 18px; color: #fff; position: relative; overflow: hidden; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
+        .kpi-card-sm::after { content: ''; position: absolute; top: -30%; right: -20%; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
+        .kpi-card-sm .kpi-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
+        .kpi-card-sm .kpi-value { font-size: 20px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
+        .kpi-card-sm .kpi-delta { font-size: 10px; font-weight: 600; }
+        .kpi-card-sm .kpi-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); flex-shrink: 0; }
+        .kpi-card-sm .kpi-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .kpi-b1 { background: #2563eb; } .kpi-b2 { background: #10b981; } .kpi-b3 { background: #ec4899; } .kpi-b4 { background: #8b5cf6; }
+        .kpi-b5 { background: #f59e0b; } .kpi-b6 { background: #06b6d4; } .kpi-b7 { background: #f97316; } .kpi-b8 { background: #14b8a6; }
+        .mm-cell { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
+        .mm-cell:hover { background: #f8fafc; }
+        .mm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .mm-icon svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
+        .mm-title { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.2; }
+        .mm-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
+        .mm-c1 { background: #2563eb; } .mm-c2 { background: #10b981; } .mm-c3 { background: #ec4899; } .mm-c4 { background: #8b5cf6; }
+        .mm-c5 { background: #f59e0b; } .mm-c6 { background: #06b6d4; } .mm-c7 { background: #f97316; } .mm-c8 { background: #14b8a6; }
+        .mm-c9 { background: #6366f1; } .mm-c10 { background: #e11d48; } .mm-c11 { background: #0891b2; } .mm-c12 { background: #7c3aed; }
+        .mm-c13 { background: #059669; } .mm-c14 { background: #d97706; } .mm-c15 { background: #db2777; } .mm-c16 { background: #0284c7; }
+        .mm-c17 { background: #65a30d; } .mm-c18 { background: #9333ea; } .mm-c19 { background: #ea580c; } .mm-c20 { background: #0d9488; }
+        .gi { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .gi svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .gc1 { background: #2563eb; } .gc2 { background: #10b981; } .gc3 { background: #ec4899; } .gc4 { background: #8b5cf6; }
+        .gc5 { background: #f59e0b; } .gc6 { background: #06b6d4; } .gc7 { background: #f97316; } .gc8 { background: #14b8a6; }
+        .gc9 { background: #6366f1; } .gc10 { background: #e11d48; } .gc11 { background: #0891b2; }
+/* Dashboard submenu - smooth collapse/expand (all nesting levels) */
+.submenu-group { }
+.submenu-head { cursor: pointer; justify-content: space-between; user-select: none; }
+.submenu-head .chev { margin-left: auto; font-size: 10px; transition: transform .25s ease; }
+.submenu-group.open > .submenu-head .chev { transform: rotate(180deg); }
+.submenu-body {
+    max-height: 0;
+    padding-left: 20px;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height .3s ease, opacity .25s ease;
+}
+.submenu-group.open > .submenu-body {
+    max-height: 1200px;
+    opacity: 1;
+}
+.submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
\ No newline at end of file
diff --git a/wwwroot/css/style2.css b/wwwroot/css/style2.css
new file mode 100644
index 0000000..402ff74
--- /dev/null
+++ b/wwwroot/css/style2.css
@@ -0,0 +1,135 @@
+:root { --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-lighter: #93c5fd; --primary-lightest: #dbeafe; --primary-bg: #eff6ff; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background: #f1f5f9; overflow-x: hidden; }
+        #sidebar-wrap { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; width: 78px; transition: width .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right: 1px solid #e2e8f0; }
+        #sidebar-wrap.open { width: 270px; }
+        #sidebar-header { flex-shrink: 0; }
+        #sidebar-footer { flex-shrink: 0; }
+        #sidebar-nav-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+        #sidebar-nav { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+        #sidebar-wrap.open #sidebar-nav .mi { margin-right: 20px; }
+        #sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        #sb-track { position: absolute; top: 0; right: 0; height: 100%; width: 16px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; }
+        #sidebar-nav-wrap:hover #sb-track { opacity: 1; }
+        #sb-track.show { opacity: 1; }
+        #sb-thumb { position: absolute; right: 4px; width: 7px; background: rgba(148,163,184,.3); border-radius: 999px; cursor: pointer !important; pointer-events: auto; transition: background .2s; min-height: 24px; }
+        #sb-thumb:hover { background: rgba(148,163,184,.5); }
+        #main { margin-left: 78px; transition: margin-left .35s cubic-bezier(.4,0,.2,1); min-height: 100vh; }
+        #main.shift { margin-left: 270px; }
+        @media (max-width: 768px) { #sidebar-wrap { transform: translateX(-100%); width: 260px !important; } #sidebar-wrap.open { transform: translateX(0); } #main { margin-left: 0 !important; } #main.shift { margin-left: 0 !important; } }
+        .section-label { padding: 16px 20px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; white-space: nowrap; transition: opacity .2s ease; }
+        .mi { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 1px 10px; border-radius: 8px; color: #64748b; cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 450; }
+        .mi::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #94a3b8; transition: height .25s ease; }
+        .mi:hover { background: rgba(0,0,0,.04); color: #334155; }
+        .mi:hover::before { height: 18px; }
+        .mi.active { background: rgba(59,130,246,.1); color: #2563eb; font-weight: 600; }
+        .mi.active::before { height: 22px; background: #3b82f6; }
+        .mi.active .ico svg { stroke: #2563eb; }
+        .mi .ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .mi .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
+        .mi .lbl { font-size: 14px; }
+        #sidebar-wrap:not(.open) .mi .lbl { display: none; }
+        #sidebar-wrap:not(.open) .mi { justify-content: center; padding: 11px 0; margin: 1px 12px; }
+        #sidebar-wrap:not(.open) .mi .ico { width: 22px; height: 22px; }
+        #sidebar-wrap:not(.open) .mi .ico svg { width: 20px; height: 20px; }
+        #sidebar-wrap:not(.open) .mi::before { display: none; }
+        #sidebar-wrap:not(.open) .arr { display: none; }
+        .submenu-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
+        .submenu-group.open > .submenu-body { max-height: 1200px; }
+        .submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
+        .arr { margin-left: auto; transition: transform .3s ease, opacity .2s; opacity: .35; }
+        .arr.rot { transform: rotate(180deg); }
+        .mi:hover .arr { opacity: .6; }
+        .mi.active .arr { opacity: .6; }
+        .dt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .dt { opacity: 1; transition-delay: .15s; }
+        #sidebar-wrap:not(.open) .dt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .lt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .lt { opacity: 1; transition-delay: .12s; }
+        #sidebar-wrap:not(.open) .lt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .chart-container { position: relative; width: 100%; }
+        .progress-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
+        .progress-bar .fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
+        .grid-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+        .grid-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
+        .grid-table tr:hover td { background: #f8fafc; }
+        .grid-table { width: 100%; border-collapse: collapse; }
+        .grid-wrap { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
+        .grid-wrap::-webkit-scrollbar { width: 4px; }
+        .grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+        .badge-blue { background: #dbeafe; color: #1e40af; }
+        .badge-green { background: #d1fae5; color: #065f46; }
+        .badge-amber { background: #fef3c7; color: #92400e; }
+        .badge-red { background: #fee2e2; color: #991b1b; }
+        .badge-gray { background: #f1f5f9; color: #475569; }
+        .badge-indigo { background: #e0e7ff; color: #3730a3; }
+        .badge-purple { background: #ede9fe; color: #5b21b6; }
+        .badge-pink { background: #fce7f3; color: #9d174d; }
+        .badge-cyan { background: #cffafe; color: #155e75; }
+        .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; }
+        .chip-blue { background: #2563eb; }
+        .chip-green { background: #10b981; }
+        .chip-amber { background: #f59e0b; }
+        .chip-red { background: #e11d48; }
+        .chip-indigo { background: #6366f1; }
+        .chip-purple { background: #8b5cf6; }
+        .chip-pink { background: #ec4899; }
+        .chip-cyan { background: #06b6d4; }
+        .chip-orange { background: #f97316; }
+        .chip-teal { background: #14b8a6; }
+        .activity-feed { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
+        .activity-feed::-webkit-scrollbar { width: 4px; }
+        .activity-feed::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .anim-fade { animation: fadeInUp .5s ease forwards; }
+        .anim-delay-1 { animation-delay: .1s; }
+        .anim-delay-2 { animation-delay: .2s; }
+        .anim-delay-3 { animation-delay: .3s; }
+        .anim-delay-4 { animation-delay: .4s; }
+        .anim-delay-5 { animation-delay: .5s; }
+        .anim-delay-6 { animation-delay: .6s; }
+        .card-bg { background: #eff6ff; border-color: #bfdbfe; }
+        .kpi-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
+        .kpi-card-sm { border-radius: 14px; padding: 18px; color: #fff; position: relative; overflow: hidden; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
+        .kpi-card-sm::after { content: ''; position: absolute; top: -30%; right: -20%; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
+        .kpi-card-sm .kpi-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
+        .kpi-card-sm .kpi-value { font-size: 20px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
+        .kpi-card-sm .kpi-delta { font-size: 10px; font-weight: 600; }
+        .kpi-card-sm .kpi-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); flex-shrink: 0; }
+        .kpi-card-sm .kpi-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .kpi-b1 { background: #2563eb; } .kpi-b2 { background: #10b981; } .kpi-b3 { background: #ec4899; } .kpi-b4 { background: #8b5cf6; }
+        .kpi-b5 { background: #f59e0b; } .kpi-b6 { background: #06b6d4; } .kpi-b7 { background: #f97316; } .kpi-b8 { background: #14b8a6; }
+        .mm-cell { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
+        .mm-cell:hover { background: #f8fafc; }
+        .mm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .mm-icon svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
+        .mm-title { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.2; }
+        .mm-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
+        .mm-c1 { background: #2563eb; } .mm-c2 { background: #10b981; } .mm-c3 { background: #ec4899; } .mm-c4 { background: #8b5cf6; }
+        .mm-c5 { background: #f59e0b; } .mm-c6 { background: #06b6d4; } .mm-c7 { background: #f97316; } .mm-c8 { background: #14b8a6; }
+        .mm-c9 { background: #6366f1; } .mm-c10 { background: #e11d48; } .mm-c11 { background: #0891b2; } .mm-c12 { background: #7c3aed; }
+        .mm-c13 { background: #059669; } .mm-c14 { background: #d97706; } .mm-c15 { background: #db2777; } .mm-c16 { background: #0284c7; }
+        .mm-c17 { background: #65a30d; } .mm-c18 { background: #9333ea; } .mm-c19 { background: #ea580c; } .mm-c20 { background: #0d9488; }
+        .gi { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .gi svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .gc1 { background: #2563eb; } .gc2 { background: #10b981; } .gc3 { background: #ec4899; } .gc4 { background: #8b5cf6; }
+        .gc5 { background: #f59e0b; } .gc6 { background: #06b6d4; } .gc7 { background: #f97316; } .gc8 { background: #14b8a6; }
+        .gc9 { background: #6366f1; } .gc10 { background: #e11d48; } .gc11 { background: #0891b2; }
+/* Dashboard submenu - smooth collapse/expand (all nesting levels) */
+.submenu-group { }
+.submenu-head { cursor: pointer; justify-content: space-between; user-select: none; }
+.submenu-head .chev { margin-left: auto; font-size: 10px; transition: transform .25s ease; }
+.submenu-group.open > .submenu-head .chev { transform: rotate(180deg); }
+.submenu-body {
+    max-height: 0;
+    padding-left: 20px;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height .3s ease, opacity .25s ease;
+}
+.submenu-group.open > .submenu-body {
+    max-height: 1200px;
+    opacity: 1;
+}
+.submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
\ No newline at end of file
diff --git a/wwwroot/css/style3.css b/wwwroot/css/style3.css
new file mode 100644
index 0000000..99797ee
--- /dev/null
+++ b/wwwroot/css/style3.css
@@ -0,0 +1,135 @@
+:root { --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; --primary-lighter: #a5b4fc; --primary-lightest: #e0e7ff; --primary-bg: #eef2ff; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background: #f1f5f9; overflow-x: hidden; }
+        #sidebar-wrap { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; width: 78px; transition: width .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%); border-right: 1px solid #e2e8f0; }
+        #sidebar-wrap.open { width: 270px; }
+        #sidebar-header { flex-shrink: 0; background: #fff; border-bottom: 1px solid #e2e8f0; }
+        #sidebar-footer { flex-shrink: 0; }
+        #sidebar-nav-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+        #sidebar-nav { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+        #sidebar-wrap.open #sidebar-nav .mi { margin-right: 20px; }
+        #sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        #sb-track { position: absolute; top: 0; right: 0; height: 100%; width: 16px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; }
+        #sidebar-nav-wrap:hover #sb-track { opacity: 1; }
+        #sb-track.show { opacity: 1; }
+        #sb-thumb { position: absolute; right: 4px; width: 7px; background: rgba(255,255,255,.25); border-radius: 999px; cursor: pointer !important; pointer-events: auto; transition: background .2s; min-height: 24px; }
+        #sb-thumb:hover { background: rgba(255,255,255,.4); }
+        #main { margin-left: 78px; transition: margin-left .35s cubic-bezier(.4,0,.2,1); min-height: 100vh; }
+        #main.shift { margin-left: 270px; }
+        @media (max-width: 768px) { #sidebar-wrap { transform: translateX(-100%); width: 260px !important; } #sidebar-wrap.open { transform: translateX(0); } #main { margin-left: 0 !important; } #main.shift { margin-left: 0 !important; } }
+        .section-label { padding: 16px 20px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.5); white-space: nowrap; transition: opacity .2s ease; }
+        .mi { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 1px 10px; border-radius: 8px; color: rgba(255,255,255,.85); cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 450; }
+        .mi::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #94a3b8; transition: height .25s ease; }
+        .mi:hover { background: rgba(255,255,255,.12); color: #fff; }
+        .mi:hover::before { height: 18px; }
+        .mi.active { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
+        .mi.active::before { height: 22px; background: rgba(255,255,255,.5); }
+        .mi.active .ico svg { stroke: #fff; }
+        .mi .ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .mi .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
+        .mi .lbl { font-size: 14px; }
+        #sidebar-wrap:not(.open) .mi .lbl { display: none; }
+        #sidebar-wrap:not(.open) .mi { justify-content: center; padding: 11px 0; margin: 1px 12px; color: rgba(255,255,255,.7); }
+        #sidebar-wrap:not(.open) .mi .ico { width: 22px; height: 22px; }
+        #sidebar-wrap:not(.open) .mi .ico svg { width: 20px; height: 20px; }
+        #sidebar-wrap:not(.open) .mi::before { display: none; }
+        #sidebar-wrap:not(.open) .arr { display: none; }
+        .submenu-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
+        .submenu-group.open > .submenu-body { max-height: 1200px; }
+        .submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
+        .arr { margin-left: auto; transition: transform .3s ease, opacity .2s; opacity: .5; }
+        .arr.rot { transform: rotate(180deg); }
+        .mi:hover .arr { opacity: .6; }
+        .mi.active .arr { opacity: .6; }
+        .dt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .dt { opacity: 1; transition-delay: .15s; }
+        #sidebar-wrap:not(.open) .dt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .lt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .lt { opacity: 1; transition-delay: .12s; }
+        #sidebar-wrap:not(.open) .lt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .chart-container { position: relative; width: 100%; }
+        .progress-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
+        .progress-bar .fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
+        .grid-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+        .grid-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
+        .grid-table tr:hover td { background: #f8fafc; }
+        .grid-table { width: 100%; border-collapse: collapse; }
+        .grid-wrap { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
+        .grid-wrap::-webkit-scrollbar { width: 4px; }
+        .grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+        .badge-blue { background: #dbeafe; color: #1e40af; }
+        .badge-green { background: #d1fae5; color: #065f46; }
+        .badge-amber { background: #fef3c7; color: #92400e; }
+        .badge-red { background: #fee2e2; color: #991b1b; }
+        .badge-gray { background: #f1f5f9; color: #475569; }
+        .badge-indigo { background: #e0e7ff; color: #3730a3; }
+        .badge-purple { background: #ede9fe; color: #5b21b6; }
+        .badge-pink { background: #fce7f3; color: #9d174d; }
+        .badge-cyan { background: #cffafe; color: #155e75; }
+        .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; }
+        .chip-blue { background: #2563eb; }
+        .chip-green { background: #10b981; }
+        .chip-amber { background: #f59e0b; }
+        .chip-red { background: #e11d48; }
+        .chip-indigo { background: #6366f1; }
+        .chip-purple { background: #8b5cf6; }
+        .chip-pink { background: #ec4899; }
+        .chip-cyan { background: #06b6d4; }
+        .chip-orange { background: #f97316; }
+        .chip-teal { background: #14b8a6; }
+        .activity-feed { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
+        .activity-feed::-webkit-scrollbar { width: 4px; }
+        .activity-feed::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .anim-fade { animation: fadeInUp .5s ease forwards; }
+        .anim-delay-1 { animation-delay: .1s; }
+        .anim-delay-2 { animation-delay: .2s; }
+        .anim-delay-3 { animation-delay: .3s; }
+        .anim-delay-4 { animation-delay: .4s; }
+        .anim-delay-5 { animation-delay: .5s; }
+        .anim-delay-6 { animation-delay: .6s; }
+        .card-bg { background: #eef2ff; border-color: #c7d2fe; }
+        .kpi-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
+        .kpi-card-sm { border-radius: 14px; padding: 18px; color: #fff; position: relative; overflow: hidden; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
+        .kpi-card-sm::after { content: ''; position: absolute; top: -30%; right: -20%; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
+        .kpi-card-sm .kpi-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
+        .kpi-card-sm .kpi-value { font-size: 20px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
+        .kpi-card-sm .kpi-delta { font-size: 10px; font-weight: 600; }
+        .kpi-card-sm .kpi-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); flex-shrink: 0; }
+        .kpi-card-sm .kpi-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .kpi-b1 { background: #2563eb; } .kpi-b2 { background: #10b981; } .kpi-b3 { background: #ec4899; } .kpi-b4 { background: #8b5cf6; }
+        .kpi-b5 { background: #f59e0b; } .kpi-b6 { background: #06b6d4; } .kpi-b7 { background: #f97316; } .kpi-b8 { background: #14b8a6; }
+        .mm-cell { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
+        .mm-cell:hover { background: #f8fafc; }
+        .mm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .mm-icon svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
+        .mm-title { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.2; }
+        .mm-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
+        .mm-c1 { background: #2563eb; } .mm-c2 { background: #10b981; } .mm-c3 { background: #ec4899; } .mm-c4 { background: #8b5cf6; }
+        .mm-c5 { background: #f59e0b; } .mm-c6 { background: #06b6d4; } .mm-c7 { background: #f97316; } .mm-c8 { background: #14b8a6; }
+        .mm-c9 { background: #6366f1; } .mm-c10 { background: #e11d48; } .mm-c11 { background: #0891b2; } .mm-c12 { background: #7c3aed; }
+        .mm-c13 { background: #059669; } .mm-c14 { background: #d97706; } .mm-c15 { background: #db2777; } .mm-c16 { background: #0284c7; }
+        .mm-c17 { background: #65a30d; } .mm-c18 { background: #9333ea; } .mm-c19 { background: #ea580c; } .mm-c20 { background: #0d9488; }
+        .gi { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .gi svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .gc1 { background: #2563eb; } .gc2 { background: #10b981; } .gc3 { background: #ec4899; } .gc4 { background: #8b5cf6; }
+        .gc5 { background: #f59e0b; } .gc6 { background: #06b6d4; } .gc7 { background: #f97316; } .gc8 { background: #14b8a6; }
+        .gc9 { background: #6366f1; } .gc10 { background: #e11d48; } .gc11 { background: #0891b2; }
+/* Dashboard submenu - smooth collapse/expand (all nesting levels) */
+.submenu-group { }
+.submenu-head { cursor: pointer; justify-content: space-between; user-select: none; }
+.submenu-head .chev { margin-left: auto; font-size: 10px; transition: transform .25s ease; }
+.submenu-group.open > .submenu-head .chev { transform: rotate(180deg); }
+.submenu-body {
+    max-height: 0;
+    padding-left: 20px;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height .3s ease, opacity .25s ease;
+}
+.submenu-group.open > .submenu-body {
+    max-height: 1200px;
+    opacity: 1;
+}
+.submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
\ No newline at end of file
diff --git a/wwwroot/css/style4.css b/wwwroot/css/style4.css
new file mode 100644
index 0000000..598d18e
--- /dev/null
+++ b/wwwroot/css/style4.css
@@ -0,0 +1,136 @@
+:root { --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; --primary-lighter: #a5b4fc; --primary-lightest: #e0e7ff; --primary-bg: #eef2ff; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background: #f1f5f9; overflow-x: hidden; }
+        #sidebar-wrap { position: fixed; top: 12px; left: 12px; bottom: 12px; height: auto; z-index: 50; width: 78px; transition: width .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow: hidden; }
+        #sidebar-wrap.open { width: 270px; }
+        #sidebar-header { flex-shrink: 0; background: #f1f5f9; }
+        #sidebar-footer { flex-shrink: 0; background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%); border-radius: 0 0 16px 16px; }
+        #sidebar-nav-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%); }
+        #sidebar-wrap.open #sidebar-nav-wrap { border-radius: 16px 16px 0 0; }
+        #sidebar-nav { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+        #sidebar-wrap.open #sidebar-nav .mi { margin-right: 20px; }
+        #sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        #sb-track { position: absolute; top: 0; right: 0; height: 100%; width: 16px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; }
+        #sidebar-nav-wrap:hover #sb-track { opacity: 1; }
+        #sb-track.show { opacity: 1; }
+        #sb-thumb { position: absolute; right: 4px; width: 7px; background: rgba(255,255,255,.25); border-radius: 999px; cursor: pointer !important; pointer-events: auto; transition: background .2s; min-height: 24px; }
+        #sb-thumb:hover { background: rgba(255,255,255,.4); }
+        #main { margin-left: 102px; transition: margin-left .35s cubic-bezier(.4,0,.2,1); min-height: 100vh; }
+        #main.shift { margin-left: 294px; }
+        @media (max-width: 768px) { #sidebar-wrap { border-radius: 16px; overflow: hidden; transform: translateX(-100%); width: 260px !important; } #sidebar-wrap.open { transform: translateX(0); } #main { margin-left: 0 !important; } #main.shift { margin-left: 0 !important; } }
+        .section-label { padding: 16px 20px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.5); white-space: nowrap; transition: opacity .2s ease; }
+        .mi { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 1px 10px; border-radius: 8px; color: rgba(255,255,255,.85); cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 450; }
+        .mi::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #94a3b8; transition: height .25s ease; }
+        .mi:hover { background: rgba(255,255,255,.12); color: #fff; }
+        .mi:hover::before { height: 18px; }
+        .mi.active { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
+        .mi.active::before { height: 22px; background: rgba(255,255,255,.5); }
+        .mi.active .ico svg { stroke: #fff; }
+        .mi .ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .mi .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
+        .mi .lbl { font-size: 14px; }
+        #sidebar-wrap:not(.open) .mi .lbl { display: none; }
+        #sidebar-wrap:not(.open) .mi { justify-content: center; padding: 11px 0; margin: 1px 12px; color: rgba(255,255,255,.7); }
+        #sidebar-wrap:not(.open) .mi .ico { width: 22px; height: 22px; }
+        #sidebar-wrap:not(.open) .mi .ico svg { width: 20px; height: 20px; }
+        #sidebar-wrap:not(.open) .mi::before { display: none; }
+        #sidebar-wrap:not(.open) .arr { display: none; }
+        .submenu-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
+        .submenu-group.open > .submenu-body { max-height: 1200px; }
+        .submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
+        .arr { margin-left: auto; transition: transform .3s ease, opacity .2s; opacity: .5; }
+        .arr.rot { transform: rotate(180deg); }
+        .mi:hover .arr { opacity: .6; }
+        .mi.active .arr { opacity: .6; }
+        .dt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .dt { opacity: 1; transition-delay: .15s; }
+        #sidebar-wrap:not(.open) .dt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .lt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .lt { opacity: 1; transition-delay: .12s; }
+        #sidebar-wrap:not(.open) .lt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .chart-container { position: relative; width: 100%; }
+        .progress-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
+        .progress-bar .fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
+        .grid-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+        .grid-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
+        .grid-table tr:hover td { background: #f8fafc; }
+        .grid-table { width: 100%; border-collapse: collapse; }
+        .grid-wrap { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
+        .grid-wrap::-webkit-scrollbar { width: 4px; }
+        .grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+        .badge-blue { background: #dbeafe; color: #1e40af; }
+        .badge-green { background: #d1fae5; color: #065f46; }
+        .badge-amber { background: #fef3c7; color: #92400e; }
+        .badge-red { background: #fee2e2; color: #991b1b; }
+        .badge-gray { background: #f1f5f9; color: #475569; }
+        .badge-indigo { background: #e0e7ff; color: #3730a3; }
+        .badge-purple { background: #ede9fe; color: #5b21b6; }
+        .badge-pink { background: #fce7f3; color: #9d174d; }
+        .badge-cyan { background: #cffafe; color: #155e75; }
+        .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; }
+        .chip-blue { background: #2563eb; }
+        .chip-green { background: #10b981; }
+        .chip-amber { background: #f59e0b; }
+        .chip-red { background: #e11d48; }
+        .chip-indigo { background: #6366f1; }
+        .chip-purple { background: #8b5cf6; }
+        .chip-pink { background: #ec4899; }
+        .chip-cyan { background: #06b6d4; }
+        .chip-orange { background: #f97316; }
+        .chip-teal { background: #14b8a6; }
+        .activity-feed { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
+        .activity-feed::-webkit-scrollbar { width: 4px; }
+        .activity-feed::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .anim-fade { animation: fadeInUp .5s ease forwards; }
+        .anim-delay-1 { animation-delay: .1s; }
+        .anim-delay-2 { animation-delay: .2s; }
+        .anim-delay-3 { animation-delay: .3s; }
+        .anim-delay-4 { animation-delay: .4s; }
+        .anim-delay-5 { animation-delay: .5s; }
+        .anim-delay-6 { animation-delay: .6s; }
+        .card-bg { background: #eef2ff; border-color: #c7d2fe; }
+        .kpi-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
+        .kpi-card-sm { border-radius: 14px; padding: 18px; color: #fff; position: relative; overflow: hidden; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
+        .kpi-card-sm::after { content: ''; position: absolute; top: -30%; right: -20%; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
+        .kpi-card-sm .kpi-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
+        .kpi-card-sm .kpi-value { font-size: 20px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
+        .kpi-card-sm .kpi-delta { font-size: 10px; font-weight: 600; }
+        .kpi-card-sm .kpi-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); flex-shrink: 0; }
+        .kpi-card-sm .kpi-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .kpi-b1 { background: #2563eb; } .kpi-b2 { background: #10b981; } .kpi-b3 { background: #ec4899; } .kpi-b4 { background: #8b5cf6; }
+        .kpi-b5 { background: #f59e0b; } .kpi-b6 { background: #06b6d4; } .kpi-b7 { background: #f97316; } .kpi-b8 { background: #14b8a6; }
+        .mm-cell { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
+        .mm-cell:hover { background: #f8fafc; }
+        .mm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .mm-icon svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
+        .mm-title { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.2; }
+        .mm-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
+        .mm-c1 { background: #2563eb; } .mm-c2 { background: #10b981; } .mm-c3 { background: #ec4899; } .mm-c4 { background: #8b5cf6; }
+        .mm-c5 { background: #f59e0b; } .mm-c6 { background: #06b6d4; } .mm-c7 { background: #f97316; } .mm-c8 { background: #14b8a6; }
+        .mm-c9 { background: #6366f1; } .mm-c10 { background: #e11d48; } .mm-c11 { background: #0891b2; } .mm-c12 { background: #7c3aed; }
+        .mm-c13 { background: #059669; } .mm-c14 { background: #d97706; } .mm-c15 { background: #db2777; } .mm-c16 { background: #0284c7; }
+        .mm-c17 { background: #65a30d; } .mm-c18 { background: #9333ea; } .mm-c19 { background: #ea580c; } .mm-c20 { background: #0d9488; }
+        .gi { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .gi svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .gc1 { background: #2563eb; } .gc2 { background: #10b981; } .gc3 { background: #ec4899; } .gc4 { background: #8b5cf6; }
+        .gc5 { background: #f59e0b; } .gc6 { background: #06b6d4; } .gc7 { background: #f97316; } .gc8 { background: #14b8a6; }
+        .gc9 { background: #6366f1; } .gc10 { background: #e11d48; } .gc11 { background: #0891b2; }
+/* Dashboard submenu - smooth collapse/expand (all nesting levels) */
+.submenu-group { }
+.submenu-head { cursor: pointer; justify-content: space-between; user-select: none; }
+.submenu-head .chev { margin-left: auto; font-size: 10px; transition: transform .25s ease; }
+.submenu-group.open > .submenu-head .chev { transform: rotate(180deg); }
+.submenu-body {
+    max-height: 0;
+    padding-left: 20px;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height .3s ease, opacity .25s ease;
+}
+.submenu-group.open > .submenu-body {
+    max-height: 1200px;
+    opacity: 1;
+}
+.submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
\ No newline at end of file
diff --git a/wwwroot/css/style5.css b/wwwroot/css/style5.css
new file mode 100644
index 0000000..b75ce1e
--- /dev/null
+++ b/wwwroot/css/style5.css
@@ -0,0 +1,142 @@
+:root { --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-lighter: #93c5fd; --primary-lightest: #dbeafe; --primary-bg: #eff6ff; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background: #f1f5f9; overflow-x: hidden; }
+        #sidebar-wrap { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; width: 78px; transition: width .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; background: #f1f5f9; border-right: 1px solid #e2e8f0; }
+        #sidebar-wrap.open { width: 270px; }
+        #sidebar-header { flex-shrink: 0; background: #fff; }
+        #sidebar-footer { flex-shrink: 0; }
+        #sidebar-nav-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
+        #sidebar-nav { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+        #sidebar-wrap.open #sidebar-nav .mi { margin-right: 20px; }
+        #sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        #sb-track { position: absolute; top: 0; right: 0; height: 100%; width: 16px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; }
+        #sidebar-nav-wrap:hover #sb-track { opacity: 1; }
+        #sb-track.show { opacity: 1; }
+        #sb-thumb { position: absolute; right: 4px; width: 7px; background: rgba(148,163,184,.3); border-radius: 999px; cursor: pointer !important; pointer-events: auto; transition: background .2s; min-height: 24px; }
+        #sb-thumb:hover { background: rgba(148,163,184,.5); }
+        #main { margin-left: 78px; transition: margin-left .35s cubic-bezier(.4,0,.2,1); min-height: 100vh; }
+        #main.shift { margin-left: 270px; }
+        @media (max-width: 768px) { #sidebar-wrap { transform: translateX(-100%); width: 260px !important; } #sidebar-wrap.open { transform: translateX(0); } #main { margin-left: 0 !important; } #main.shift { margin-left: 0 !important; } }
+        .submenu-group { }
+        .submenu-head { cursor: pointer; justify-content: space-between; user-select: none; }
+        .submenu-head .chev { margin-left: auto; font-size: 10px; transition: transform .25s ease; }
+        .submenu-group.open > .submenu-head .chev { transform: rotate(180deg); }
+        .submenu-body {
+            max-height: 0;
+            padding-left: 20px;
+            opacity: 0;
+            overflow: hidden;
+            transition: max-height .3s ease, opacity .25s ease;
+        }
+        .submenu-group.open > .submenu-body {
+            max-height: 1200px;
+            opacity: 1;
+        }
+        .submenu-body .mi.sub { padding: 7px 16px; font-size: 13px; }
+        .section-label { padding: 16px 20px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; white-space: nowrap; transition: opacity .2s ease; }
+        .mi { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 1px 10px; color: #64748b; cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 450; }
+        .mi::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: #94a3b8; transition: height .25s ease; }
+        .mi:hover { background: rgba(0,0,0,.04); color: #334155; }
+        .mi:hover::before { height: 18px; }
+        .mi.active { background: rgba(59,130,246,.1); color: #2563eb; font-weight: 600; }
+        .mi.active::before { height: 22px; background: #3b82f6; }
+        .mi.active .ico svg { stroke: #2563eb; }
+        .mi .ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .mi .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
+        .mi .lbl { font-size: 14px; }
+        #sidebar-wrap:not(.open) .mi .lbl { display: none; }
+        #sidebar-wrap:not(.open) .mi { justify-content: center; padding: 11px 0; margin: 1px 12px; }
+        #sidebar-wrap:not(.open) .mi .ico { width: 22px; height: 22px; }
+        #sidebar-wrap:not(.open) .mi .ico svg { width: 20px; height: 20px; }
+        #sidebar-wrap:not(.open) .mi::before { display: none; }
+        #sidebar-wrap:not(.open) .subs { display: none; }
+        #sidebar-wrap:not(.open) .arr { display: none; }
+        .subs { overflow: hidden; transition: max-height .3s ease; }
+        .subs.open { max-height: 300px; }
+        .subs.closed { max-height: 0; }
+        .subs .mi { padding-left: 42px; font-size: 13px; color: #94a3b8; }
+        .subs .mi::before { display: none; }
+        .subs .mi .ico { width: 4px; height: 4px; min-width: 4px; }
+        .subs .mi .ico svg { width: 4px; height: 4px; }
+        .subs .mi:hover { background: rgba(0,0,0,.04); color: #475569; }
+        .subs .mi.active { background: rgba(59,130,246,.1); color: #2563eb; font-weight: 600; }
+        .subs .mi.active .ico svg { stroke: #2563eb; }
+        .arr { margin-left: auto; transition: transform .3s ease, opacity .2s; opacity: .35; }
+        .arr.rot { transform: rotate(180deg); }
+        .mi:hover .arr { opacity: .6; }
+        .mi.active .arr { opacity: .6; }
+        .dt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .dt { opacity: 1; transition-delay: .15s; }
+        #sidebar-wrap:not(.open) .dt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .lt { transition: opacity .2s ease; }
+        #sidebar-wrap.open .lt { opacity: 1; transition-delay: .12s; }
+        #sidebar-wrap:not(.open) .lt { opacity: 0; transition-delay: 0s; pointer-events: none; }
+        .chart-container { position: relative; width: 100%; }
+        .progress-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
+        .progress-bar .fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
+        .grid-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+        .grid-table td { padding: 10px 12px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9; }
+        .grid-table tr:hover td { background: #f8fafc; }
+        .grid-table { width: 100%; border-collapse: collapse; }
+        .grid-wrap { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
+        .grid-wrap::-webkit-scrollbar { width: 4px; }
+        .grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+        .badge-blue { background: #dbeafe; color: #1e40af; }
+        .badge-green { background: #d1fae5; color: #065f46; }
+        .badge-amber { background: #fef3c7; color: #92400e; }
+        .badge-red { background: #fee2e2; color: #991b1b; }
+        .badge-gray { background: #f1f5f9; color: #475569; }
+        .badge-indigo { background: #e0e7ff; color: #3730a3; }
+        .badge-purple { background: #ede9fe; color: #5b21b6; }
+        .badge-pink { background: #fce7f3; color: #9d174d; }
+        .badge-cyan { background: #cffafe; color: #155e75; }
+        .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; }
+        .chip-blue { background: #2563eb; }
+        .chip-green { background: #10b981; }
+        .chip-amber { background: #f59e0b; }
+        .chip-red { background: #e11d48; }
+        .chip-indigo { background: #6366f1; }
+        .chip-purple { background: #8b5cf6; }
+        .chip-pink { background: #ec4899; }
+        .chip-cyan { background: #06b6d4; }
+        .chip-orange { background: #f97316; }
+        .chip-teal { background: #14b8a6; }
+        .activity-feed { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
+        .activity-feed::-webkit-scrollbar { width: 4px; }
+        .activity-feed::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .anim-fade { animation: fadeInUp .5s ease forwards; }
+        .anim-delay-1 { animation-delay: .1s; }
+        .anim-delay-2 { animation-delay: .2s; }
+        .anim-delay-3 { animation-delay: .3s; }
+        .anim-delay-4 { animation-delay: .4s; }
+        .anim-delay-5 { animation-delay: .5s; }
+        .anim-delay-6 { animation-delay: .6s; }
+        .card-bg { background: #eff6ff; border-color: #bfdbfe; }
+        .kpi-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
+        .kpi-card-sm { padding: 18px; color: #fff; position: relative; overflow: hidden; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; }
+        .kpi-card-sm::after { content: ''; position: absolute; top: -30%; right: -20%; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
+        .kpi-card-sm .kpi-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
+        .kpi-card-sm .kpi-value { font-size: 20px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
+        .kpi-card-sm .kpi-delta { font-size: 10px; font-weight: 600; }
+        .kpi-card-sm .kpi-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); flex-shrink: 0; }
+        .kpi-card-sm .kpi-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .kpi-b1 { background: #2563eb; } .kpi-b2 { background: #10b981; } .kpi-b3 { background: #ec4899; } .kpi-b4 { background: #8b5cf6; }
+        .kpi-b5 { background: #f59e0b; } .kpi-b6 { background: #06b6d4; } .kpi-b7 { background: #f97316; } .kpi-b8 { background: #14b8a6; }
+        .mm-cell { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; transition: background .2s; }
+        .mm-cell:hover { background: #f8fafc; }
+        .mm-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .mm-icon svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
+        .mm-title { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.2; }
+        .mm-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
+        .mm-c1 { background: #2563eb; } .mm-c2 { background: #10b981; } .mm-c3 { background: #ec4899; } .mm-c4 { background: #8b5cf6; }
+        .mm-c5 { background: #f59e0b; } .mm-c6 { background: #06b6d4; } .mm-c7 { background: #f97316; } .mm-c8 { background: #14b8a6; }
+        .mm-c9 { background: #6366f1; } .mm-c10 { background: #e11d48; } .mm-c11 { background: #0891b2; } .mm-c12 { background: #7c3aed; }
+        .mm-c13 { background: #059669; } .mm-c14 { background: #d97706; } .mm-c15 { background: #db2777; } .mm-c16 { background: #0284c7; }
+        .mm-c17 { background: #65a30d; } .mm-c18 { background: #9333ea; } .mm-c19 { background: #ea580c; } .mm-c20 { background: #0d9488; }
+        .gi { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+        .gi svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+        .gc1 { background: #2563eb; } .gc2 { background: #10b981; } .gc3 { background: #ec4899; } .gc4 { background: #8b5cf6; }
+        .gc5 { background: #f59e0b; } .gc6 { background: #06b6d4; } .gc7 { background: #f97316; } .gc8 { background: #14b8a6; }
+        .gc9 { background: #6366f1; } .gc10 { background: #e11d48; } .gc11 { background: #0891b2; }
\ No newline at end of file
diff --git a/wwwroot/css/tabs-page.css b/wwwroot/css/tabs-page.css
new file mode 100644
index 0000000..892764f
--- /dev/null
+++ b/wwwroot/css/tabs-page.css
@@ -0,0 +1,28 @@
+/* Tabs Page Specific Styles */
+.tp-underline { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
+.tp-underline::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px; border-radius:2px 2px 0 0; background:transparent; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
+.tp-underline.active::after { background:#6366f1; }
+.tp-underline:hover::after { background:#a5b4fc; }
+.tp-pill { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
+.tp-pill.active { background:#6366f1; color:white; box-shadow:0 2px 8px rgba(99,102,241,0.35); }
+.tp-pill:not(.active):hover { background:#eef2ff; color:#4f46e5; }
+.tp-vertical { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
+.tp-vertical.active { background:#eef2ff; color:#4f46e5; }
+.tp-vertical:not(.active):hover { background:#f9fafb; color:#4f46e5; }
+.tp-card { transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
+.tp-card.active { background:#eef2ff; border-color:#6366f1; }
+.tp-card:not(.active):hover { background:#f9fafb; border-color:#e5e7eb; }
+.tp-content { animation:tpFadeIn 0.25s ease-out; }
+@keyframes tpFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
+.tp-fade { animation:tpAnimFade 0.5s ease-out both; }
+@keyframes tpAnimFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
+.tp-delay-1 { animation-delay:0.1s; }
+.tp-delay-2 { animation-delay:0.2s; }
+.tp-delay-3 { animation-delay:0.3s; }
+.tp-delay-4 { animation-delay:0.4s; }
+.tp-delay-5 { animation-delay:0.5s; }
+.tp-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:tpShimmer 1.5s infinite; border-radius:6px; }
+.dark .tp-skeleton { background:linear-gradient(90deg,rgba(255,255,255,0.06) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.06) 75%); background-size:200% 100%; }
+@keyframes tpShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
+.tp-panel-enter { animation:tpPanelSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
+@keyframes tpPanelSlideIn { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
diff --git a/wwwroot/favicon.ico b/wwwroot/favicon.ico
new file mode 100644
index 0000000..63e859b
Binary files /dev/null and b/wwwroot/favicon.ico differ
diff --git a/wwwroot/img/crm1.png b/wwwroot/img/crm1.png
new file mode 100644
index 0000000..4d079d6
Binary files /dev/null and b/wwwroot/img/crm1.png differ
diff --git a/wwwroot/img/crm2.png b/wwwroot/img/crm2.png
new file mode 100644
index 0000000..5c54758
Binary files /dev/null and b/wwwroot/img/crm2.png differ
diff --git a/wwwroot/img/crm3.png b/wwwroot/img/crm3.png
new file mode 100644
index 0000000..21a8340
Binary files /dev/null and b/wwwroot/img/crm3.png differ
diff --git a/wwwroot/img/crm4.png b/wwwroot/img/crm4.png
new file mode 100644
index 0000000..19a452e
Binary files /dev/null and b/wwwroot/img/crm4.png differ
diff --git a/wwwroot/img/crm5.png b/wwwroot/img/crm5.png
new file mode 100644
index 0000000..d802545
Binary files /dev/null and b/wwwroot/img/crm5.png differ
diff --git a/wwwroot/img/eam1.png b/wwwroot/img/eam1.png
new file mode 100644
index 0000000..0ba5cb5
Binary files /dev/null and b/wwwroot/img/eam1.png differ
diff --git a/wwwroot/img/eam2.png b/wwwroot/img/eam2.png
new file mode 100644
index 0000000..1d2a8d5
Binary files /dev/null and b/wwwroot/img/eam2.png differ
diff --git a/wwwroot/img/eam3.png b/wwwroot/img/eam3.png
new file mode 100644
index 0000000..0fc6609
Binary files /dev/null and b/wwwroot/img/eam3.png differ
diff --git a/wwwroot/img/eam4.png b/wwwroot/img/eam4.png
new file mode 100644
index 0000000..6f32b0e
Binary files /dev/null and b/wwwroot/img/eam4.png differ
diff --git a/wwwroot/img/eam5.png b/wwwroot/img/eam5.png
new file mode 100644
index 0000000..b84d18d
Binary files /dev/null and b/wwwroot/img/eam5.png differ
diff --git a/wwwroot/img/fms1.png b/wwwroot/img/fms1.png
new file mode 100644
index 0000000..f12be42
Binary files /dev/null and b/wwwroot/img/fms1.png differ
diff --git a/wwwroot/img/fms2.png b/wwwroot/img/fms2.png
new file mode 100644
index 0000000..7edd4a5
Binary files /dev/null and b/wwwroot/img/fms2.png differ
diff --git a/wwwroot/img/fms3.png b/wwwroot/img/fms3.png
new file mode 100644
index 0000000..be3d9cf
Binary files /dev/null and b/wwwroot/img/fms3.png differ
diff --git a/wwwroot/img/fms4.png b/wwwroot/img/fms4.png
new file mode 100644
index 0000000..d415b29
Binary files /dev/null and b/wwwroot/img/fms4.png differ
diff --git a/wwwroot/img/fms5.png b/wwwroot/img/fms5.png
new file mode 100644
index 0000000..eb70b96
Binary files /dev/null and b/wwwroot/img/fms5.png differ
diff --git a/wwwroot/img/hrm1.png b/wwwroot/img/hrm1.png
new file mode 100644
index 0000000..0fb86e1
Binary files /dev/null and b/wwwroot/img/hrm1.png differ
diff --git a/wwwroot/img/hrm2.png b/wwwroot/img/hrm2.png
new file mode 100644
index 0000000..daa1a86
Binary files /dev/null and b/wwwroot/img/hrm2.png differ
diff --git a/wwwroot/img/hrm3.png b/wwwroot/img/hrm3.png
new file mode 100644
index 0000000..02c9a85
Binary files /dev/null and b/wwwroot/img/hrm3.png differ
diff --git a/wwwroot/img/hrm4.png b/wwwroot/img/hrm4.png
new file mode 100644
index 0000000..3231acf
Binary files /dev/null and b/wwwroot/img/hrm4.png differ
diff --git a/wwwroot/img/hrm5.png b/wwwroot/img/hrm5.png
new file mode 100644
index 0000000..446dfd1
Binary files /dev/null and b/wwwroot/img/hrm5.png differ
diff --git a/wwwroot/img/itsm1.png b/wwwroot/img/itsm1.png
new file mode 100644
index 0000000..72e6805
Binary files /dev/null and b/wwwroot/img/itsm1.png differ
diff --git a/wwwroot/img/itsm2.png b/wwwroot/img/itsm2.png
new file mode 100644
index 0000000..01793ab
Binary files /dev/null and b/wwwroot/img/itsm2.png differ
diff --git a/wwwroot/img/itsm3.png b/wwwroot/img/itsm3.png
new file mode 100644
index 0000000..2d1105b
Binary files /dev/null and b/wwwroot/img/itsm3.png differ
diff --git a/wwwroot/img/itsm4.png b/wwwroot/img/itsm4.png
new file mode 100644
index 0000000..d4aadfd
Binary files /dev/null and b/wwwroot/img/itsm4.png differ
diff --git a/wwwroot/img/itsm5.png b/wwwroot/img/itsm5.png
new file mode 100644
index 0000000..2ccdf18
Binary files /dev/null and b/wwwroot/img/itsm5.png differ
diff --git a/wwwroot/img/pos1.png b/wwwroot/img/pos1.png
new file mode 100644
index 0000000..5439570
Binary files /dev/null and b/wwwroot/img/pos1.png differ
diff --git a/wwwroot/img/pos2.png b/wwwroot/img/pos2.png
new file mode 100644
index 0000000..d8d6252
Binary files /dev/null and b/wwwroot/img/pos2.png differ
diff --git a/wwwroot/img/pos3.png b/wwwroot/img/pos3.png
new file mode 100644
index 0000000..895461d
Binary files /dev/null and b/wwwroot/img/pos3.png differ
diff --git a/wwwroot/img/pos4.png b/wwwroot/img/pos4.png
new file mode 100644
index 0000000..cc34f9c
Binary files /dev/null and b/wwwroot/img/pos4.png differ
diff --git a/wwwroot/img/pos5.png b/wwwroot/img/pos5.png
new file mode 100644
index 0000000..ff30b5a
Binary files /dev/null and b/wwwroot/img/pos5.png differ
diff --git a/wwwroot/img/rms1.png b/wwwroot/img/rms1.png
new file mode 100644
index 0000000..36c24ee
Binary files /dev/null and b/wwwroot/img/rms1.png differ
diff --git a/wwwroot/img/rms2.png b/wwwroot/img/rms2.png
new file mode 100644
index 0000000..4a60431
Binary files /dev/null and b/wwwroot/img/rms2.png differ
diff --git a/wwwroot/img/rms3.png b/wwwroot/img/rms3.png
new file mode 100644
index 0000000..d1fcd99
Binary files /dev/null and b/wwwroot/img/rms3.png differ
diff --git a/wwwroot/img/rms4.png b/wwwroot/img/rms4.png
new file mode 100644
index 0000000..ab68187
Binary files /dev/null and b/wwwroot/img/rms4.png differ
diff --git a/wwwroot/img/rms5.png b/wwwroot/img/rms5.png
new file mode 100644
index 0000000..8367c53
Binary files /dev/null and b/wwwroot/img/rms5.png differ
diff --git a/wwwroot/img/scm1.png b/wwwroot/img/scm1.png
new file mode 100644
index 0000000..45d60c4
Binary files /dev/null and b/wwwroot/img/scm1.png differ
diff --git a/wwwroot/img/scm2.png b/wwwroot/img/scm2.png
new file mode 100644
index 0000000..fc1ca42
Binary files /dev/null and b/wwwroot/img/scm2.png differ
diff --git a/wwwroot/img/scm3.png b/wwwroot/img/scm3.png
new file mode 100644
index 0000000..a246e97
Binary files /dev/null and b/wwwroot/img/scm3.png differ
diff --git a/wwwroot/img/scm4.png b/wwwroot/img/scm4.png
new file mode 100644
index 0000000..e47c0c8
Binary files /dev/null and b/wwwroot/img/scm4.png differ
diff --git a/wwwroot/img/scm5.png b/wwwroot/img/scm5.png
new file mode 100644
index 0000000..be010c7
Binary files /dev/null and b/wwwroot/img/scm5.png differ
diff --git a/wwwroot/img/tms1.png b/wwwroot/img/tms1.png
new file mode 100644
index 0000000..75abfe5
Binary files /dev/null and b/wwwroot/img/tms1.png differ
diff --git a/wwwroot/img/tms2.png b/wwwroot/img/tms2.png
new file mode 100644
index 0000000..ad64fa3
Binary files /dev/null and b/wwwroot/img/tms2.png differ
diff --git a/wwwroot/img/tms3.png b/wwwroot/img/tms3.png
new file mode 100644
index 0000000..e9449ff
Binary files /dev/null and b/wwwroot/img/tms3.png differ
diff --git a/wwwroot/img/tms4.png b/wwwroot/img/tms4.png
new file mode 100644
index 0000000..dfca319
Binary files /dev/null and b/wwwroot/img/tms4.png differ
diff --git a/wwwroot/img/tms5.png b/wwwroot/img/tms5.png
new file mode 100644
index 0000000..ef64e8f
Binary files /dev/null and b/wwwroot/img/tms5.png differ
diff --git a/wwwroot/img/wms1.png b/wwwroot/img/wms1.png
new file mode 100644
index 0000000..48af4fd
Binary files /dev/null and b/wwwroot/img/wms1.png differ
diff --git a/wwwroot/img/wms2.png b/wwwroot/img/wms2.png
new file mode 100644
index 0000000..f883c87
Binary files /dev/null and b/wwwroot/img/wms2.png differ
diff --git a/wwwroot/img/wms3.png b/wwwroot/img/wms3.png
new file mode 100644
index 0000000..e5d0fe3
Binary files /dev/null and b/wwwroot/img/wms3.png differ
diff --git a/wwwroot/img/wms4.png b/wwwroot/img/wms4.png
new file mode 100644
index 0000000..1bc9298
Binary files /dev/null and b/wwwroot/img/wms4.png differ
diff --git a/wwwroot/img/wms5.png b/wwwroot/img/wms5.png
new file mode 100644
index 0000000..d7611ee
Binary files /dev/null and b/wwwroot/img/wms5.png differ
diff --git a/wwwroot/js/dashboard-crm.js b/wwwroot/js/dashboard-crm.js
new file mode 100644
index 0000000..e9f1359
--- /dev/null
+++ b/wwwroot/js/dashboard-crm.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Target', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Website', 'Referral', 'Social', 'Email', 'Others'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Calls', 'Emails', 'Meetings', 'Total'], datasets: [{ label: 'Activity', data: [245, 450, 89, 784], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v.toLocaleString() } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-eam.js b/wwwroot/js/dashboard-eam.js
new file mode 100644
index 0000000..14e9ceb
--- /dev/null
+++ b/wwwroot/js/dashboard-eam.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Maintenance', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Production', 'Utilities', 'Infrastructure', 'Transport', 'Facilities'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['PM', 'CM', 'Inspection', 'Total'], datasets: [{ label: 'Activity', data: [142, 86, 312, 540], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-fms.js b/wwwroot/js/dashboard-fms.js
new file mode 100644
index 0000000..e9a8dfa
--- /dev/null
+++ b/wwwroot/js/dashboard-fms.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Expenses', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Payroll', 'Operations', 'Marketing', 'R&D', 'Others'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Operating', 'Investing', 'Financing', 'Net Change'], datasets: [{ label: 'Cash Flow', data: [3.2, -1.1, -0.8, 1.3], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-hrm.js b/wwwroot/js/dashboard-hrm.js
new file mode 100644
index 0000000..b359864
--- /dev/null
+++ b/wwwroot/js/dashboard-hrm.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'New Hires', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Engineering', 'Marketing', 'Sales', 'Operations', 'HR & Finance'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Active', 'On Leave', 'Probation', 'Contract End'], datasets: [{ label: 'Status', data: [89.2, 5.5, 4.2, 1.1], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-itsm.js b/wwwroot/js/dashboard-itsm.js
new file mode 100644
index 0000000..8842952
--- /dev/null
+++ b/wwwroot/js/dashboard-itsm.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Resolved', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Hardware', 'Software', 'Network', 'Security', 'Other'], datasets: [{ data: [28, 32, 18, 12, 10], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Critical', 'High', 'Medium', 'Total'], datasets: [{ label: 'Priority', data: [8, 14, 18, 40], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-pos.js b/wwwroot/js/dashboard-pos.js
new file mode 100644
index 0000000..e9f1359
--- /dev/null
+++ b/wwwroot/js/dashboard-pos.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const grayText = '#94a3b8';
+  const plRevenue = '#2563eb', plExpenses = '#f97316';
+  new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Target', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+  new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Website', 'Referral', 'Social', 'Email', 'Others'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+  new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Calls', 'Emails', 'Meetings', 'Total'], datasets: [{ label: 'Activity', data: [245, 450, 89, 784], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v.toLocaleString() } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-rms.js b/wwwroot/js/dashboard-rms.js
new file mode 100644
index 0000000..d381d1f
--- /dev/null
+++ b/wwwroot/js/dashboard-rms.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function() {
+const grayText = '#94a3b8';
+const plRevenue = '#2563eb', plExpenses = '#f97316';
+new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Scheduled', data: [1.8,2.1,1.9,2.2,2.4,2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Unfilled', data: [1.4,1.6,1.5,1.7,1.8,1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v + 'K' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Morning','Afternoon','Night','Weekend','Others'], datasets: [{ data: [42,22,15,12,9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Clock In','Clock Out','Breaks','Total'], datasets: [{ label: 'Activity', data: [245, 450, 89, 784], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 } } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-scm.js b/wwwroot/js/dashboard-scm.js
new file mode 100644
index 0000000..d78ae40
--- /dev/null
+++ b/wwwroot/js/dashboard-scm.js
@@ -0,0 +1,50 @@
+(function() {
+const nav = document.getElementById('sidebar-nav');
+const wrap = document.getElementById('sidebar-nav-wrap');
+const track = document.getElementById('sb-track');
+const thumb = document.getElementById('sb-thumb');
+if (!nav || !track || !thumb || !wrap) return;
+let isDragging = false;
+function show() { track.style.opacity = '1'; }
+function hide() { if (!isDragging) track.style.opacity = '0'; }
+function update() {
+const sh = nav.scrollHeight, ch = nav.clientHeight;
+if (sh <= ch) { track.style.display = 'none'; return; }
+track.style.display = 'block'; track.style.opacity = '1';
+const st = nav.scrollTop, th = Math.max((ch / sh) * ch, 24);
+const maxTop = ch - th, ratio = sh > ch ? st / (sh - ch) : 0;
+thumb.style.height = th + 'px'; thumb.style.top = (ratio * maxTop) + 'px';
+}
+const observer = new MutationObserver(function() {
+update(); setTimeout(function() {
+update();
+if (nav.scrollHeight > nav.clientHeight) { track.style.display = 'block'; track.style.opacity = '1'; }
+}, 350);
+});
+observer.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
+nav.addEventListener('scroll', update); window.addEventListener('resize', update);
+wrap.addEventListener('mouseenter', function() { show(); update(); });
+wrap.addEventListener('mouseleave', hide);
+thumb.addEventListener('mousedown', function(e) {
+e.preventDefault(); isDragging = true; track.style.opacity = '1';
+document.body.style.cursor = 'pointer'; document.body.style.userSelect = 'none';
+function onMove(ev) {
+if (!isDragging) return;
+const rect = track.getBoundingClientRect();
+nav.scrollTop = ((ev.clientY - rect.top) / rect.height) * (nav.scrollHeight - nav.clientHeight);
+}
+function onUp() {
+isDragging = false; document.body.style.cursor = ''; document.body.style.userSelect = '';
+document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+}
+document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+});
+update(); setTimeout(update, 300);
+})();
+document.addEventListener('DOMContentLoaded', function() {
+const grayText = '#94a3b8';
+const plRevenue = '#2563eb', plExpenses = '#f97316';
+new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Revenue', data: [1.8,2.1,1.9,2.2,2.4,2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Budget', data: [1.4,1.6,1.5,1.7,1.8,1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Direct Raw','Indirect','Logistics','IT','Others'], datasets: [{ data: [42,22,15,12,9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['PR Created','PO Issued','Deliveries','Total'], datasets: [{ label: 'Procurement', data: [423, 186, 52, 661], backgroundColor: ['#10b981', '#10b981', '#10b981', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 } } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-tms.js b/wwwroot/js/dashboard-tms.js
new file mode 100644
index 0000000..0ddda43
--- /dev/null
+++ b/wwwroot/js/dashboard-tms.js
@@ -0,0 +1,50 @@
+(function() {
+const nav = document.getElementById('sidebar-nav');
+const wrap = document.getElementById('sidebar-nav-wrap');
+const track = document.getElementById('sb-track');
+const thumb = document.getElementById('sb-thumb');
+if (!nav || !track || !thumb || !wrap) return;
+let isDragging = false;
+function show() { track.style.opacity = '1'; }
+function hide() { if (!isDragging) track.style.opacity = '0'; }
+function update() {
+const sh = nav.scrollHeight, ch = nav.clientHeight;
+if (sh <= ch) { track.style.display = 'none'; return; }
+track.style.display = 'block'; track.style.opacity = '1';
+const st = nav.scrollTop, th = Math.max((ch / sh) * ch, 24);
+const maxTop = ch - th, ratio = sh > ch ? st / (sh - ch) : 0;
+thumb.style.height = th + 'px'; thumb.style.top = (ratio * maxTop) + 'px';
+}
+const observer = new MutationObserver(function() {
+update(); setTimeout(function() {
+update();
+if (nav.scrollHeight > nav.clientHeight) { track.style.display = 'block'; track.style.opacity = '1'; }
+}, 350);
+});
+observer.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
+nav.addEventListener('scroll', update); window.addEventListener('resize', update);
+wrap.addEventListener('mouseenter', function() { show(); update(); });
+wrap.addEventListener('mouseleave', hide);
+thumb.addEventListener('mousedown', function(e) {
+e.preventDefault(); isDragging = true; track.style.opacity = '1';
+document.body.style.cursor = 'pointer'; document.body.style.userSelect = 'none';
+function onMove(ev) {
+if (!isDragging) return;
+const rect = track.getBoundingClientRect();
+nav.scrollTop = ((ev.clientY - rect.top) / rect.height) * (nav.scrollHeight - nav.clientHeight);
+}
+function onUp() {
+isDragging = false; document.body.style.cursor = ''; document.body.style.userSelect = '';
+document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+}
+document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+});
+update(); setTimeout(update, 300);
+})();
+document.addEventListener('DOMContentLoaded', function() {
+const grayText = '#94a3b8';
+const plRevenue = '#2563eb', plExpenses = '#f97316';
+new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Revenue', data: [1.8,2.1,1.9,2.2,2.4,2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Target', data: [1.4,1.6,1.5,1.7,1.8,1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Website','Referral','Social','Email','Others'], datasets: [{ data: [42,22,15,12,9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Calls','Emails','Meetings','Total'], datasets: [{ label: 'Activity', data: [245, 450, 89, 784], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v.toLocaleString() } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/dashboard-wms.js b/wwwroot/js/dashboard-wms.js
new file mode 100644
index 0000000..fc2d736
--- /dev/null
+++ b/wwwroot/js/dashboard-wms.js
@@ -0,0 +1,50 @@
+(function() {
+const nav = document.getElementById('sidebar-nav');
+const wrap = document.getElementById('sidebar-nav-wrap');
+const track = document.getElementById('sb-track');
+const thumb = document.getElementById('sb-thumb');
+if (!nav || !track || !thumb || !wrap) return;
+let isDragging = false;
+function show() { track.style.opacity = '1'; }
+function hide() { if (!isDragging) track.style.opacity = '0'; }
+function update() {
+const sh = nav.scrollHeight, ch = nav.clientHeight;
+if (sh <= ch) { track.style.display = 'none'; return; }
+track.style.display = 'block'; track.style.opacity = '1';
+const st = nav.scrollTop, th = Math.max((ch / sh) * ch, 24);
+const maxTop = ch - th, ratio = sh > ch ? st / (sh - ch) : 0;
+thumb.style.height = th + 'px'; thumb.style.top = (ratio * maxTop) + 'px';
+}
+const observer = new MutationObserver(function() {
+update(); setTimeout(function() {
+update();
+if (nav.scrollHeight > nav.clientHeight) { track.style.display = 'block'; track.style.opacity = '1'; }
+}, 350);
+});
+observer.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
+nav.addEventListener('scroll', update); window.addEventListener('resize', update);
+wrap.addEventListener('mouseenter', function() { show(); update(); });
+wrap.addEventListener('mouseleave', hide);
+thumb.addEventListener('mousedown', function(e) {
+e.preventDefault(); isDragging = true; track.style.opacity = '1';
+document.body.style.cursor = 'pointer'; document.body.style.userSelect = 'none';
+function onMove(ev) {
+if (!isDragging) return;
+const rect = track.getBoundingClientRect();
+nav.scrollTop = ((ev.clientY - rect.top) / rect.height) * (nav.scrollHeight - nav.clientHeight);
+}
+function onUp() {
+isDragging = false; document.body.style.cursor = ''; document.body.style.userSelect = '';
+document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+}
+document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+});
+update(); setTimeout(update, 300);
+})();
+document.addEventListener('DOMContentLoaded', function() {
+const grayText = '#94a3b8';
+const plRevenue = '#2563eb', plExpenses = '#f97316';
+new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Revenue', data: [1.8,2.1,1.9,2.2,2.4,2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Outgoing', data: [1.4,1.6,1.5,1.7,1.8,1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Racking','Bulk','Overflow','Cold','Others'], datasets: [{ data: [42,22,15,12,9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
+new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Goods Receive','Deliveries','Adjustments','Total'], datasets: [{ label: 'Activity', data: [450, 320, 180, 950], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => v } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
+});
diff --git a/wwwroot/js/datatables.js b/wwwroot/js/datatables.js
new file mode 100644
index 0000000..5155e32
--- /dev/null
+++ b/wwwroot/js/datatables.js
@@ -0,0 +1,215 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const selectAll = document.getElementById('select-all-invoices');
+  const invoiceChecks = document.querySelectorAll('.invoice-checkbox');
+  const bulkToolbar = document.getElementById('bulk-toolbar');
+  const selectedCount = document.getElementById('selected-count');
+  if (selectAll && invoiceChecks.length) {
+    function updateBulkToolbar() {
+      const checked = document.querySelectorAll('.invoice-checkbox:checked');
+      const count = checked.length;
+      if (count > 0) {
+        bulkToolbar.classList.remove('hidden');
+        bulkToolbar.classList.add('flex');
+        selectedCount.textContent = count + ' selected';
+        invoiceChecks.forEach(function (cb) { cb.closest('tr').classList.toggle('bg-blue-50/40', cb.checked); });
+      } else {
+        bulkToolbar.classList.add('hidden');
+        bulkToolbar.classList.remove('flex');
+        selectedCount.textContent = '0 selected';
+        invoiceChecks.forEach(function (cb) { cb.closest('tr').classList.remove('bg-blue-50/40'); });
+      }
+    }
+    selectAll.addEventListener('change', function () {
+      invoiceChecks.forEach(function (cb) { cb.checked = selectAll.checked; });
+      updateBulkToolbar();
+    });
+    invoiceChecks.forEach(function (cb) {
+      cb.addEventListener('change', function () {
+        var allChecked = true;
+        invoiceChecks.forEach(function (c) { if (!c.checked) allChecked = false; });
+        selectAll.checked = allChecked;
+        updateBulkToolbar();
+      });
+    });
+  }
+  var expandBtns = document.querySelectorAll('.expand-btn');
+  expandBtns.forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var row = this.closest('tr');
+      var detailRow = row.nextElementSibling;
+      var icon = this.querySelector('.expand-icon');
+      if (detailRow && detailRow.classList.contains('expand-detail')) {
+        detailRow.classList.toggle('hidden');
+        if (detailRow.classList.contains('hidden')) { icon.style.transform = 'rotate(0deg)'; }
+        else { icon.style.transform = 'rotate(90deg)'; }
+      }
+    });
+  });
+  (function () {
+    var searchInput = document.getElementById('product-search');
+    var catSelect = document.getElementById('product-category');
+    var tbody = document.getElementById('product-tbody');
+    var infoEl = document.getElementById('product-info');
+    if (!searchInput || !catSelect || !tbody || !infoEl) return;
+    var productRows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
+    function filterProducts() {
+      var q = searchInput.value.toLowerCase().trim();
+      var cat = catSelect.value;
+      var visible = 0;
+      var lowStock = 0;
+      productRows.forEach(function (tr) {
+        var cells = tr.querySelectorAll('td');
+        if (cells.length < 5) return;
+        var sku = cells[0].textContent.toLowerCase();
+        var name = cells[1].textContent.toLowerCase();
+        var category = cells[2].textContent.trim();
+        var stockText = cells[3].textContent.trim();
+        var stockNum = parseInt(stockText.replace(/[^0-9-]/g, '')) || 0;
+        var matchSearch = q === '' || sku.indexOf(q) !== -1 || name.indexOf(q) !== -1;
+        var matchCat = cat === '' || category === cat;
+        if (matchSearch && matchCat) {
+          tr.style.display = '';
+          visible++;
+          if (stockNum > 0 && stockNum < 100) lowStock++;
+        } else {
+          tr.style.display = 'none';
+        }
+      });
+      infoEl.innerHTML = 'Showing <b class="text-gray-600">' + visible + '</b> of <b class="text-gray-600">' + productRows.length + '</b> products';
+      var lowEl = infoEl.parentElement.querySelector('.text-amber-600');
+      if (lowEl) lowEl.textContent = lowStock;
+    }
+    searchInput.addEventListener('input', filterProducts);
+    catSelect.addEventListener('change', filterProducts);
+  })();
+  (function () {
+    var tbody = document.getElementById('transactions-tbody');
+    var infoEl = document.getElementById('transactions-info');
+    var pageBtnsEl = document.getElementById('transactions-page-btns');
+    if (!tbody || !infoEl || !pageBtnsEl) return;
+    var perPage = 10;
+    var totalEntries = 120;
+    var totalPages = Math.ceil(totalEntries / perPage);
+    var currentPage = 1;
+    var accounts = [
+      'PT. MegaCorp - 001-234-5678', 'TechDistrib Inc. - 002-987-6543',
+      'CloudHost Ltd. - 003-456-7890', 'OfficePro Supply - 004-567-8901',
+      'MegaNetwork Corp - 005-678-9012', 'Consulting Plus - 006-789-0123',
+      'DataSys Solutions - 007-890-1234', 'GreenEnergy Corp - 008-901-2345',
+      'SmartBuild Ltd. - 009-012-3456', 'MediCare Supplies - 010-123-4567',
+      'AquaPure Systems - 011-234-5678', 'FinServe Global - 012-345-6789',
+      'LogiTrack Inc. - 013-456-7890', 'BioHealth Labs - 014-567-8901',
+      'EduPrime Academy - 015-678-9012'
+    ];
+    var methods = ['Wire Transfer', 'Bank Transfer', 'Credit Card', 'ACH Transfer', 'Digital Wallet'];
+    var statuses = [
+      { label: 'Success', chip: 'chip-green' },
+      { label: 'Pending', chip: 'chip-amber' },
+      { label: 'Processed', chip: 'chip-blue' },
+      { label: 'Failed', chip: 'chip-red' }
+    ];
+    function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
+    function pick(arr) { return arr[rand(0, arr.length - 1)]; }
+    var allData = [];
+    for (var i = 1; i <= totalEntries; i++) {
+      var amount = rand(500, 50000) + rand(0, 99) / 100;
+      allData.push({
+        id: 'TRX-2026-' + String(i).padStart(3, '0'),
+        from: pick(accounts),
+        to: pick(accounts),
+        nominal: '$' + amount.toFixed(2),
+        status: pick(statuses),
+        method: pick(methods)
+      });
+    }
+    var originalData = [
+      { id: 'TRX-2026-001', from: 'PT. MegaCorp - 001-234-5678', to: 'TechDistrib Inc. - 002-987-6543', nominal: '$24,500.00', status: { label: 'Success', chip: 'chip-green' }, method: 'Wire Transfer' },
+      { id: 'TRX-2026-002', from: 'CloudHost Ltd. - 003-456-7890', to: 'PT. MegaCorp - 001-234-5678', nominal: '$12,800.00', status: { label: 'Pending', chip: 'chip-amber' }, method: 'Bank Transfer' },
+      { id: 'TRX-2026-003', from: 'OfficePro Supply - 004-567-8901', to: 'PT. MegaCorp - 001-234-5678', nominal: '$6,200.00', status: { label: 'Processed', chip: 'chip-blue' }, method: 'Credit Card' },
+      { id: 'TRX-2026-004', from: 'PT. MegaCorp - 001-234-5678', to: 'MegaNetwork Corp - 005-678-9012', nominal: '$32,000.00', status: { label: 'Failed', chip: 'chip-red' }, method: 'Wire Transfer' },
+      { id: 'TRX-2026-005', from: 'Consulting Plus - 006-789-0123', to: 'PT. MegaCorp - 001-234-5678', nominal: '$18,000.00', status: { label: 'Success', chip: 'chip-green' }, method: 'Bank Transfer' },
+      { id: 'TRX-2026-006', from: 'DataSys Solutions - 007-890-1234', to: 'PT. MegaCorp - 001-234-5678', nominal: '$45,200.00', status: { label: 'Pending', chip: 'chip-amber' }, method: 'ACH Transfer' },
+      { id: 'TRX-2026-007', from: 'PT. MegaCorp - 001-234-5678', to: 'GreenEnergy Corp - 008-901-2345', nominal: '$28,900.00', status: { label: 'Processed', chip: 'chip-blue' }, method: 'Wire Transfer' },
+      { id: 'TRX-2026-008', from: 'SmartBuild Ltd. - 009-012-3456', to: 'PT. MegaCorp - 001-234-5678', nominal: '$8,750.00', status: { label: 'Failed', chip: 'chip-red' }, method: 'Credit Card' },
+      { id: 'TRX-2026-009', from: 'PT. MegaCorp - 001-234-5678', to: 'MediCare Supplies - 010-123-4567', nominal: '$19,300.00', status: { label: 'Success', chip: 'chip-green' }, method: 'Bank Transfer' },
+      { id: 'TRX-2026-010', from: 'AquaPure Systems - 011-234-5678', to: 'PT. MegaCorp - 001-234-5678', nominal: '$11,400.00', status: { label: 'Pending', chip: 'chip-amber' }, method: 'ACH Transfer' }
+    ];
+    for (var idx = 0; idx < originalData.length; idx++) {
+      allData[idx] = originalData[idx];
+    }
+    function renderPage(page) {
+      var start = (page - 1) * perPage;
+      var end = Math.min(start + perPage, totalEntries);
+      var html = '';
+      for (var i = start; i < end; i++) {
+        var d = allData[i];
+        html += '<tr class="bg-white hover:bg-gray-50/50 transition">' +
+          '<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">' + d.id + '</td>' +
+          '<td class="px-4 py-3 text-sm text-gray-600">' + d.from + '</td>' +
+          '<td class="px-4 py-3 text-sm text-gray-600">' + d.to + '</td>' +
+          '<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">' + d.nominal + '</td>' +
+          '<td class="px-4 py-3 text-center"><span class="chip ' + d.status.chip + '">' + d.status.label + '</span></td>' +
+          '<td class="px-4 py-3 text-sm text-gray-600">' + d.method + '</td></tr>';
+      }
+      tbody.innerHTML = html;
+      infoEl.innerHTML = 'Showing <b class="text-gray-600">' + (start + 1) + '</b> to <b class="text-gray-600">' + end + '</b> of <b class="text-gray-600">' + totalEntries + '</b> entries';
+      var btnsHtml = '';
+      var prevDisabled = page === 1;
+      btnsHtml += '<button class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 transition' + (prevDisabled ? ' cursor-not-allowed opacity-50' : '') + '" data-page="prev"' + (prevDisabled ? ' disabled' : '') + '>Previous</button>';
+      var maxVisible = 7;
+      var startPage, endPage;
+      if (totalPages <= maxVisible) {
+        startPage = 1;
+        endPage = totalPages;
+      } else {
+        var half = Math.floor(maxVisible / 2);
+        if (page <= half + 1) {
+          startPage = 1;
+          endPage = maxVisible;
+        } else if (page >= totalPages - half) {
+          startPage = totalPages - maxVisible + 1;
+          endPage = totalPages;
+        } else {
+          startPage = page - half;
+          endPage = page + half;
+        }
+      }
+      if (startPage > 1) {
+        btnsHtml += '<button class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 transition" data-page="1">1</button>';
+        if (startPage > 2) {
+          btnsHtml += '<span class="px-1 text-gray-400">...</span>';
+        }
+      }
+      for (var p = startPage; p <= endPage; p++) {
+        var isActive = p === page;
+        btnsHtml += '<button class="px-3 py-1.5 text-xs font-medium rounded-lg border' +
+          (isActive ? ' bg-blue-600 text-white border-blue-600' : ' border-gray-200 bg-white text-gray-700 hover:bg-gray-50 transition') +
+          '" data-page="' + p + '">' + p + '</button>';
+      }
+      if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+          btnsHtml += '<span class="px-1 text-gray-400">...</span>';
+        }
+        btnsHtml += '<button class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 transition" data-page="' + totalPages + '">' + totalPages + '</button>';
+      }
+      var nextDisabled = page === totalPages;
+      btnsHtml += '<button class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 transition' + (nextDisabled ? ' cursor-not-allowed opacity-50' : '') + '" data-page="next"' + (nextDisabled ? ' disabled' : '') + '>Next</button>';
+      pageBtnsEl.innerHTML = btnsHtml;
+      var btns = pageBtnsEl.querySelectorAll('button:not([disabled])');
+      btns.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          var target = this.getAttribute('data-page');
+          var newPage = page;
+          if (target === 'prev') newPage = page - 1;
+          else if (target === 'next') newPage = page + 1;
+          else newPage = parseInt(target);
+          if (newPage >= 1 && newPage <= totalPages) {
+            currentPage = newPage;
+            renderPage(currentPage);
+          }
+        });
+      });
+    }
+    renderPage(1);
+  })();
+});
diff --git a/wwwroot/js/landing.js b/wwwroot/js/landing.js
new file mode 100644
index 0000000..ddd7a61
--- /dev/null
+++ b/wwwroot/js/landing.js
@@ -0,0 +1,12 @@
+function initScrollSpy() {
+  const observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (e) {
+      if (e.isIntersecting) {
+        document.querySelectorAll('.nav-link').forEach(function (l) { l.classList.remove('active'); });
+        var el = document.querySelector('.nav-link[href="#' + e.target.id + '"]');
+        if (el) el.classList.add('active');
+      }
+    });
+  }, { rootMargin: '-80px 0px -50% 0px' });
+  document.querySelectorAll('section[id]').forEach(function (s) { observer.observe(s); });
+}
diff --git a/wwwroot/js/script.js b/wwwroot/js/script.js
new file mode 100644
index 0000000..b1d28b9
--- /dev/null
+++ b/wwwroot/js/script.js
@@ -0,0 +1,99 @@
+(function () {
+  const nav = document.getElementById('sidebar-nav');
+  const wrap = document.getElementById('sidebar-nav-wrap');
+  const track = document.getElementById('sb-track');
+  const thumb = document.getElementById('sb-thumb');
+  if (!nav || !track || !thumb || !wrap) return;
+  let isDragging = false;
+  function show() { track.style.opacity = '1'; }
+  function hide() { if (!isDragging) track.style.opacity = '0'; }
+  function update() {
+    const sh = nav.scrollHeight, ch = nav.clientHeight;
+    if (sh <= ch) { track.style.display = 'none'; return; }
+    track.style.display = 'block'; track.style.opacity = '1';
+    const st = nav.scrollTop, th = Math.max((ch / sh) * ch, 24);
+    const maxTop = ch - th, ratio = sh > ch ? st / (sh - ch) : 0;
+    thumb.style.height = th + 'px'; thumb.style.top = (ratio * maxTop) + 'px';
+  }
+  const observer = new MutationObserver(function () {
+    update(); setTimeout(function () {
+      update();
+      if (nav.scrollHeight > nav.clientHeight) { track.style.display = 'block'; track.style.opacity = '1'; }
+    }, 350);
+  });
+  observer.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
+  nav.addEventListener('scroll', update); window.addEventListener('resize', update);
+  wrap.addEventListener('mouseenter', function () { show(); update(); });
+  wrap.addEventListener('mouseleave', hide);
+  thumb.addEventListener('mousedown', function (e) {
+    e.preventDefault(); isDragging = true; track.style.opacity = '1';
+    document.body.style.cursor = 'pointer'; document.body.style.userSelect = 'none';
+    function onMove(ev) {
+      if (!isDragging) return;
+      const rect = track.getBoundingClientRect();
+      nav.scrollTop = ((ev.clientY - rect.top) / rect.height) * (nav.scrollHeight - nav.clientHeight);
+    }
+    function onUp() {
+      isDragging = false; document.body.style.cursor = ''; document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+  });
+  update(); setTimeout(update, 300);
+
+  nav.querySelectorAll('.submenu-group:not(.open) > .submenu-body').forEach(function (b) {
+    b.style.maxHeight = '0px';
+  });
+
+  function setBodyHeight(group) {
+    const body = group.querySelector(':scope > .submenu-body');
+    if (!body) return;
+    if (group.classList.contains('open')) {
+      body.style.maxHeight = body.scrollHeight + 'px';
+    } else {
+      body.style.maxHeight = '0px';
+    }
+  }
+
+  nav.addEventListener('transitionend', function (e) {
+    if (!e.target.classList || !e.target.classList.contains('submenu-body')) return;
+    if (e.propertyName !== 'max-height') return;
+    if (e.target.style.maxHeight !== '0px') {
+      e.target.style.maxHeight = 'none';
+    }
+  });
+
+  nav.addEventListener('click', function (e) {
+    const head = e.target.closest('.submenu-head');
+    if (!head) return;
+    const group = head.parentElement;
+    if (group && group.classList.contains('submenu-group')) {
+      group.classList.toggle('open');
+      setBodyHeight(group);
+      update();
+    }
+  });
+
+  function activateCurrent() {
+    const currentPage = window.location.pathname; // includes leading slash, matches href="/..."
+    if (!currentPage) return;
+    const activeLink = nav.querySelector('a[href="' + currentPage + '"]');
+    if (!activeLink) return;
+    activeLink.classList.add('active');
+    let node = activeLink.parentElement;
+    while (node && node !== nav) {
+      if (node.classList && node.classList.contains('submenu-group')) {
+        node.classList.add('open');
+        setBodyHeight(node);
+      }
+      node = node.parentElement;
+    }
+    update();
+    requestAnimationFrame(function () { activeLink.scrollIntoView({ block: 'nearest' }); });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', activateCurrent);
+  } else {
+    activateCurrent();
+  }
+})();
diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js
new file mode 100644
index 0000000..0937657
--- /dev/null
+++ b/wwwroot/js/site.js
@@ -0,0 +1,4 @@
+// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+// for details on configuring this project to bundle and minify static web assets.
+
+// Write your JavaScript code.
diff --git a/wwwroot/js/tabs.js b/wwwroot/js/tabs.js
new file mode 100644
index 0000000..c4e7e0c
--- /dev/null
+++ b/wwwroot/js/tabs.js
@@ -0,0 +1,15 @@
+function switchTab(group, tabId) {
+  const tablist = document.getElementById('tablist' + group); if (!tablist) return;
+  const tabs = tablist.querySelectorAll('[role="tab"]');
+  tabs.forEach(t => { const isTarget = t.getAttribute('aria-controls') === 'panel' + group + '-' + tabId; t.setAttribute('aria-selected', isTarget ? 'true' : 'false'); t.classList.toggle('active', isTarget); });
+  const panels = tablist.closest('.bg-white') ? tablist.closest('.bg-white').querySelectorAll('[role="tabpanel"]') : tablist.parentElement.parentElement.querySelectorAll('[role="tabpanel"]');
+  panels.forEach(p => p.classList.toggle('hidden', p.id !== 'panel' + group + '-' + tabId));
+}
+function switchTabAnimated(group, tabId, btn) {
+  const tablist = document.getElementById('tablist' + group); if (!tablist) return;
+  const tabs = tablist.querySelectorAll('[role="tab"]');
+  tabs.forEach(t => { t.setAttribute('aria-selected', 'false'); t.style.background = ''; t.style.border = ''; t.style.color = ''; });
+  btn.setAttribute('aria-selected', 'true'); btn.style.background = 'white'; btn.style.border = '1px solid #e5e7eb'; btn.style.borderBottom = '1px solid white'; btn.style.color = '#1e293b';
+  const panels = tablist.parentElement.parentElement.querySelectorAll('[role="tabpanel"]');
+  panels.forEach(p => { const isTarget = p.id === 'panel' + group + '-' + tabId; if (isTarget) { p.classList.remove('hidden'); p.classList.add('tp-panel-enter'); const si = p.querySelectorAll('.stagger-item'); si.forEach((it, i) => { it.style.animation = 'none'; it.offsetHeight; it.style.animation = ''; }); } else { p.classList.add('hidden'); p.classList.remove('tp-panel-enter'); } });
+}